如何將活動 class 添加到 Vue.js 中的多個復選框？

Question

例子

var app = new Vue({
  el: '#app',
  data: {
    isActive : false,
    chkGenres : [],
    genres : [
      { "id" : "1", "name" : "Apple" },
      { "id" : "2", "name" : "Banana" },
      { "id" : "3", "name" : "Peach" }
    ]
  },
  methods: {
    isChecked(){
      this.isActive = ! this.isActive;
    }
  }
});

演示

請查看我的演示

https://jsfiddle.net/byxda8eq/9/

我想要的是

當指定的復選框被選中時，我想將 class “活動”切換為 li 標簽。

我找不到辦法做到這一點，因為我的大腦每天都不能工作。

如何？

Answer 1

這里的問題是您使用單個isActive數據選項並將其綁定到所有復選框。 因此，當其中任何一個被選中時，它會切換isActive值並綁定到所有這些值，因此所有 li class 都會更改。

通過向genres數組中的所有對象添加新屬性isActive來解決此問題的一種簡單方法，例如：

genres : [
  { "id" : "1", "name" : "Apple", isActive: false },
  { "id" : "2", "name" : "Banana", isActive: false },
  { "id" : "3", "name" : "Peach", isActive: false }
]

然后更新模板，如：

<li v-for="genre in genres" :class="{ active : genre.isActive }">

然后更新 click 方法，如：

@click="isChecked(genre)"

和主要方法，如：

isChecked(genre){
  genre.isActive = !genre.isActive;
}

小提琴演示