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

我似乎不知道如何在表中的特定项上切换类。我使用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;
       }
    }

{{item.Name}
{{item.Address}
{{项目.电话}
{{item.Email}
导出默认值{
数据（）{
返回{
I：错，
数据：数据
}
},
方法：{
选择此项（val，索引）{
this.isActive=！this.isActive
}
},
计算：{
tableFilter（）{
返回数据；
}
}

使用

v-for

指令的元素内的任何绑定都将应用于

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}"
>

---

使用

v-for

指令的元素内的任何绑定都将应用于

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}"
>

---

你说得对！非常感谢！在这件事上花了太多时间。祝你今天愉快：）你说得对！非常感谢！在这件事上花了太多时间。祝你今天愉快：）