Vue.js中如何为v-for循环内的产品按钮单独添加active类

这个问题我之前帮不少开发者处理过，核心问题就是你大概率用了一个全局状态变量（比如data里的activeButton）来控制所有按钮的active类，导致点击任何一个按钮，所有同类型按钮都会跟着变——因为它们共享了同一个状态。Vue的正确姿势是让每个产品拥有独立的选中状态，下面给你两种常用的实现方式：

方式一：直接在产品数据中维护选中状态（推荐，逻辑更直观） #

如果你的产品数据是可以修改的，直接给每个产品对象添加一个记录选中类型的字段（比如activeType），这样每个产品的状态完全独立：

模板代码 #

<div id="app">
  <div class="products">
    <div class="product" v-for="product in products" :key="product.id">
      <h3>{{ product.name }}</h3>
      <button 
        :class="{ active: product.activeType === 'new' }"
        @click="setActive(product, 'new')"
      >
        New
      </button>
      <button 
        :class="{ active: product.activeType === 'used' }"
        @click="setActive(product, 'used')"
      >
        Used
      </button>
    </div>
  </div>
</div>

JS代码（Options API） #

new Vue({
  el: '#app',
  data() {
    return {
      products: [
        { id: 1, name: '产品A', activeType: null }, // 初始无选中
        { id: 2, name: '产品B', activeType: 'new' }, // 初始选中New
        { id: 3, name: '产品C', activeType: null }
      ]
    }
  },
  methods: {
    setActive(product, type) {
      // 点击时切换或设置选中类型，也可以加逻辑：再次点击取消选中
      product.activeType = product.activeType === type ? null : type;
    }
  }
})

方式二：用独立对象维护选中状态（不修改原产品数据） #

如果不想改动原产品的数据源，可以在data里声明一个单独的对象，用产品的唯一标识（比如id）作为键，存储对应的选中类型：

模板代码 #

<div id="app">
  <div class="products">
    <div class="product" v-for="product in products" :key="product.id">
      <h3>{{ product.name }}</h3>
      <button 
        :class="{ active: selectedStates[product.id] === 'new' }"
        @click="setActive(product.id, 'new')"
      >
        New
      </button>
      <button 
        :class="{ active: selectedStates[product.id] === 'used' }"
        @click="setActive(product.id, 'used')"
      >
        Used
      </button>
    </div>
  </div>
</div>

JS代码（Options API） #

new Vue({
  el: '#app',
  data() {
    return {
      products: [
        { id: 1, name: '产品A' },
        { id: 2, name: '产品B' },
        { id: 3, name: '产品C' }
      ],
      selectedStates: {} // 结构：{ 产品id: 'new'/'used'/null }
    }
  },
  methods: {
    setActive(productId, type) {
      // 同样可以加取消选中的逻辑
      this.selectedStates[productId] = this.selectedStates[productId] === type ? null : type;
      // Vue2中修改对象新增属性需要确保响应式，要用Vue.set：
      // Vue.set(this.selectedStates, productId, ...)
    }
  }
})

补充：Vue 3 Composition API写法（可选） #

如果用Vue 3的话，逻辑类似，只是用ref或reactive来声明状态：

import { reactive } from 'vue';

export default {
  setup() {
    const products = reactive([
      { id: 1, name: '产品A', activeType: null }
    ]);

    const setActive = (product, type) => {
      product.activeType = product.activeType === type ? null : type;
    };

    return { products, setActive };
  }
}

核心逻辑就是让每个产品的按钮状态和自身绑定，而不是共用全局状态，这样就不会出现点击一个按钮所有同类型按钮都变的问题了。

内容的提问来源于stack exchange，提问作者Whiskey T.