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

Posted

技术标签:

【中文标题】VueJS 将类切换到表中的特定元素【英文标题】:VueJS Toggle class to specific element in table 【发布时间】:2018-01-31 03:59:08 【问题描述】:

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

【问题讨论】:

【参考方案1】:

使用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"
>

【讨论】:

你是对的!太感谢了!在这方面使用的时间比我应该的要多。祝你有美好的一天:)

以上是关于VueJS 将类切换到表中的特定元素的主要内容,如果未能解决你的问题,请参考以下文章

如何使用vue js将数组中的数组检索到表中

Grails数据库迁移-将插入值手动更改日志记录到表中的特定列

如何从 VueJs 中的选定元素中删除特定的类名?

EF:将类属性映射到行而不是列

MySQL 插入查询中提到的 Java Array 元素未插入到表中。而是抛出错误

如何在不使用输入元素的情况下捕获 Vuejs 中的任何按键事件