Question

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

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

JSF问题的中点： Uniplate

HTML

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

Vue实例

var app = new Vue({
  el: '#app',
  data: {
    available: false,
    names: [{'name':'Jerry'},{'name':'Eddie'},{'name':'Kerry'},{'name':'Jane'}]
  }
})

Css

.available{
    text-decoration: line-through;
}

Answer 1

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

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>

Answer 2

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

const names = [{'name':'Jerry'},{'name':'Eddie'},{'name':'Kerry'},{'name':'Jane'}]

const app = new Vue({
  el: '#app',
  data: () => ({
    names: names.map(name => ({ ...name, available: false }))
  })
})

.available {
  text-decoration: line-through;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(name, i) in names">
      <input :id="`name_${i}`" v-model="name.available" type="checkbox">
      <label :for="`name_${i}`" :class="{ available: name.available }">
        {{name.name}}
      </label>
    </li>
  </ul>
</div>

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

2 个答案: