Javascript 如何在Vue中更改特定复选框标签class@change？

背景：我有一个绑定到名称数组的复选框列表。单击复选框后，我将尝试更改特定名称的类

问题：单击复选框后，它会更改所有名称的类，而不是附加到复选框的特定名称

问题之二：

HTML

Css

将available属性移入每个name元素，并切换模板中的name.available。您甚至可以在复选框上使用v-model

const names=[{'name'：'Jerry'}，{'name'：'Eddie'}，{'name'：'Kerry'}，{'name'：'Jane'}] const app=新的Vue{ el:“应用程序”， 数据：=>{ name:names.mapname=>{…name，可用：false} } } .可用{ 文字装饰：线条贯通； } {{name.name} 将available属性移入每个name元素，并切换模板中的name.available。您甚至可以在复选框上使用v-model

const names=[{'name'：'Jerry'}，{'name'：'Eddie'}，{'name'：'Kerry'}，{'name'：'Jane'}] const app=新的Vue{ el:“应用程序”， 数据：=>{ name:names.mapname=>{…name，可用：false} } } .可用{ 文字装饰：线条贯通； } {{name.name}

---

将可用变量添加到每个名称对象，并使用方法更新可用属性：

var app = new Vue({
  el: '#app',
  data: {
    names: [
      {'name':'Jerry', 'available': false},
      {'name':'Eddie', 'available': false},
      {'name':'Kerry', 'available': false},
      {'name':'Jane', 'available': false}
     ]
  },
  methods: {
    updateAvailable(index) {
      // Update the available property on the specific object with its index
      this.names[index].available = !this.names[index].available
    }
  }
})

然后在模板中，调用updateAvailable方法：

<div id="app">
<ul>
 <li v-for="(name, index) in names" :key="index">
   <input @click="updateAvailable(index)" type="checkbox">  
   <label :class="{available: name.available}" >{{name.name}}</label>
  </li>
</ul> 
</div>

---

将可用变量添加到每个名称对象，并使用方法更新可用属性：

var app = new Vue({
  el: '#app',
  data: {
    names: [
      {'name':'Jerry', 'available': false},
      {'name':'Eddie', 'available': false},
      {'name':'Kerry', 'available': false},
      {'name':'Jane', 'available': false}
     ]
  },
  methods: {
    updateAvailable(index) {
      // Update the available property on the specific object with its index
      this.names[index].available = !this.names[index].available
    }
  }
})

然后在模板中，调用updateAvailable方法：

<div id="app">
<ul>
 <li v-for="(name, index) in names" :key="index">
   <input @click="updateAvailable(index)" type="checkbox">  
   <label :class="{available: name.available}" >{{name.name}}</label>
  </li>
</ul> 
</div>

---

您需要跟踪每个名称的可用状态。您需要跟踪每个名称的可用状态。为什么不将名称传递到updateAvailable方法中？那么你就不需要通过index@Phil你赢了我一拳。当传递名称为时不起作用。我在想原因myself@EddieWeldon该方法需要成为updateAvailablename{name.available=！name.available}，但除此之外，它应该完全有效。要更新name.available属性而不使用元素的索引，可以在@click事件中直接传递name对象，并将其可用属性更新为@EddieWeldon explain。为什么不将名称传递到updateAvailable方法中？那么你就不需要通过index@Phil你赢了我一拳。当传递名称为时不起作用。我在想原因myself@EddieWeldon该方法需要成为updateAvailablename{name.available=！name.available}，但除此之外，它应该完全有效。要更新name.available属性而不使用元素的索引，可以在@click事件中直接传递name对象，并将其可用道具更新为@EddieWeldon explain。

<div id="app">
<ul>
 <li v-for="(name, index) in names" :key="index">
   <input @click="updateAvailable(index)" type="checkbox">  
   <label :class="{available: name.available}" >{{name.name}}</label>
  </li>
</ul> 
</div>