如何为v-for循环生成的元素绑定点击事件并单独切换类？

这个问题我之前也碰到过！核心原因是你现在用了一个单一的focusService变量，所有通过v-for生成的column-service元素都绑定了这个变量，所以点击任何一个，所有元素的类都会跟着切换——因为它们共享同一个状态嘛。

下面给你两种实用的解决方案，根据你需要的多选/单选场景来选：

方案一：给每个数据项添加独立的选中状态（适合多选） #

如果允许同时选中多个服务框，这种方案最直接：

1. 首先在获取数据后，给每个estimation对象新增一个isSelected属性，用来标记它自己的选中状态：

// 假设你是从接口获取filteredEstimation数据，在拿到数据后处理
this.filteredEstimation = 接口返回的数组.map(item => ({
  ...item, // 保留原数据的所有属性
  isSelected: false // 初始化选中状态为未选中
}))

2. 然后修改模板，把类绑定和点击事件改成针对当前item的isSelected属性：

<div class="list-services">
  <div 
    class='column-service' 
    v-for='estimation in filteredEstimation' 
    v-bind:key="estimation.name" 
    :class="{ 'focusService': estimation.isSelected }" 
    @click="estimation.isSelected = !estimation.isSelected"
  >
    <div class="service-name">{{estimation.name}}</div>
    <div class="service-description">{{estimation.description}}</div>
    <div class="service-price">
      {{estimation.price}} <span class="price-currency">€</span>
    </div>
  </div>
</div>

注意这里的focusService要加引号，因为它是CSS类名的字符串，不然Vue会把它当成变量解析哦。

方案二：维护当前选中项的唯一标识（适合单选） #

如果同一时间只能选中一个服务框，这种方案更合适：

1. 在Vue组件的data里新增一个变量，用来存储当前选中项的唯一标识（比如用name，有id的话用id更稳妥）：

data() {
  return {
    selectedService: null, // 存储当前选中的服务name或id
    // 其他原有数据...
  }
}

2. 修改模板，类绑定判断当前项的标识是否和selectedService一致，点击事件更新这个变量：

<div class="list-services">
  <div 
    class='column-service' 
    v-for='estimation in filteredEstimation' 
    v-bind:key="estimation.name" 
    :class="{ 'focusService': estimation.name === selectedService }" 
    @click="selectedService = estimation.name === selectedService ? null : estimation.name"
  >
    <div class="service-name">{{estimation.name}}</div>
    <div class="service-description">{{estimation.description}}</div>
    <div class="service-price">
      {{estimation.price}} <span class="price-currency">€</span>
    </div>
  </div>
</div>

这样点击同一个服务框会取消选中，点击其他框会自动切换选中状态。

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