Vue
HTML
<div id="app">
<div v-for="(item,index) in items" :key="index">
<div :class="{ active: item.active}" @click="toggleActive(index)">
{{ item.foo }}
{{ item.number }}
</div>
</div>
</div>
CSS
.active {
color: red;
}
Vue
new Vue({
el: "#app",
data: {
items: [
{
foo: 'something',
number: 60
},
{
foo: 'anything',
number: 15
},
{
foo: 'text',
number: 20,
}
]
},
methods: {
toggleActive(index) {
let item = this.items[index];
item.active = !item.active;
this.$set(this.items, index, item);
}
}
})