Vue循环中点击元素添加类名并移除其他元素同类名的实现问题

这个问题我之前做进度条组件时也碰到过！核心原因是你把选中状态(selected)放在了每个子组件内部，导致各个子组件的状态互相独立，父组件没法统一控制所有组件的高亮状态。要实现类似菜单激活项的单选效果，我们需要把选中状态统一托管在父组件，然后通过props传递给子组件，子组件点击时通知父组件更新选中项。

下面是具体的代码修改方案：

父组件修改 #

首先我们在父组件里维护一个记录当前选中步骤索引的变量，然后通过props把“是否选中”的状态传给每个子组件，同时监听子组件的点击事件来更新选中索引：

<template>
  <step-icon 
    v-for="(step, index) in steps" 
    :key="index" <!-- 列表渲染必须加key，这是Vue的最佳实践 -->
    :is-selected="index === activeStepIndex"
    :step-index="index"
    @step-click="handleStepClick"
  />
</template>

<script>
export default {
  data() {
    return {
      steps: [{foo: 'bar'}, {foo2: 'bar2'}],
      activeStepIndex: -1 // 初始值设为-1表示未选中任何项，也可以设为0默认选中第一个步骤
    }
  },
  methods: {
    handleStepClick(selectedIndex) {
      this.activeStepIndex = selectedIndex;
    }
  }
}
</script>

子组件step-icon.vue修改 #

子组件不再自己维护selected状态，而是通过props接收父组件传来的isSelected，点击时只需要把当前步骤的索引通知给父组件即可：

<template>
  <div :class="{'selected': isSelected}" @click="onStepClick()">
    hello
  </div>
</template>

<script>
export default {
  props: {
    isSelected: {
      type: Boolean,
      default: false
    },
    stepIndex: {
      type: Number,
      required: true
    }
  },
  methods: {
    onStepClick() {
      // 通过emit触发父组件的事件，把当前步骤索引传回去
      this.$emit('step-click', this.stepIndex);
    }
  }
}
</script>

为什么这样改能解决问题？ #

• 状态统一管理：所有子组件的选中状态由父组件的activeStepIndex控制，当点击某个子组件时，父组件更新这个索引，所有子组件会自动根据index === activeStepIndex判断自己是否应该高亮，自然就实现了“点击一个，其他取消”的效果。
• 子组件职责单一：子组件只负责展示和触发点击事件，状态管理交给父组件，符合Vue的组件设计思想。
• 避免独立状态冲突：之前每个子组件自己的selected状态是独立的，父组件没法干预，现在把状态提到父组件后，就能统一控制所有子组件的状态了。

这样修改后，你点击任意一个step-icon，它会被加上selected类，其他组件的该类会自动移除，完全符合你想要的菜单激活项效果。

内容的提问来源于stack exchange，提问作者michael