Query: I have a list of checkboxes connected to an array of names. The objective is to alter the class of a specific name when its checkbox is clicked.
Issue: Clicking on a checkbox causes all names to change class, instead of only affecting the one associated with the checkbox.
View the problem in action on JSFiddle: JSFiddle
HTML
<div id="app">
<ul>
<li v-for="name in names" :key="index"gt;
<input @click="available = !available" type="checkbox">
<label :class="{available:available}" >{{name.name}}</label>
</li>
</ul>
</div>
Vue instance
var app = new Vue({
el: '#app',
data: {
available: false,
names: [{'name':'Jerry'},{'name':'Eddie'},{'name':'Kerry'},{'name':'Jane'}]
}
})
Css
.available{
text-decoration: line-through;
}