我似乎不知道如何在表中的特定项目上切换类。我使用 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;
}
}
元素内的任何绑定使用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}"
>
如果多个元素可以在给定时间处于活动状态,您可以在页面上跟踪每个元素的活动状态item
对象本身:
<tr
v-for="(item, index) in tableFilter"
@click="item.active = !item.active"
v-bind:class="{'active': item.active}"
>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)