vue.js - VueJS 将类切换到表中的特定元素

Question

我似乎无法弄清楚如何在表格中的特定项目上切换类。我正在使用 v-for 循环处理数据并将其打印给用户。目标是在用户单击表格内的特定元素时切换类。当我尝试添加 v-bind:class="{'active' : isActive} 时，它只是将该类添加到所有类而不是特定类。

<table>
     <tbody>
           <tr v-for="(item, index) in tableFilter"  @click="selectThis(item)" v-bind:class="{'active': isActive}">
                 <td>{{item.Name}}</td>
                 <td>{{item.Address}}</td>
                 <td>{{item.Telephone}}</td>
                 <td>{{item.Email}}</td>
            </tr>
     </tbody>
</table>

export default  {
    data() {
          return {
              isActive: false,
              data: data
          }
    },
    methods: {
          selectThis(val, index) {
              this.isActive =! this.isActive
          }
     },
    computed: {
       tableFilter() {
           return data;
       }
    }

Answer 1

元素内使用 v-for 指令的任何绑定(bind)都将应用于 v-for 呈现的每个元素。

如果一次只有一个元素处于事件状态，您可以跟踪事件索引:

data() {
  return {
    activeIndex: null,
    data: data,
  }
},
methods: {
  selectThis(val, index) {
    this.activeIndex = index;
  }
}

然后改用它:

<tr 
  v-for="(item, index) in tableFilter"  
  @click="selectThis(item)" 
  v-bind:class="{'active': activeIndex === index}"
>

---

如果多个元素在给定时间处于事件状态，您可以在 item 对象本身上跟踪每个元素的事件状态:

<tr 
  v-for="(item, index) in tableFilter"  
  @click="item.active = !item.active" 
  v-bind:class="{'active': item.active}"
>