VueJSテーブル内の特定の要素にクラスを切り替えます

Question

テーブル内の特定の項目でクラスを切り替える方法がわかりません。私は、データをループしてユーザに印刷するためにv-forを使用しています。目標は、ユーザーが表の中の特定の要素をクリックしたときにクラスを切り替えることです。私がv-バインドを追加しようとしているとき：クラス= "{『アクティブ』：の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ディレクティブは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}" 
>