When I have a number of buttons, generated using the v-for directive, with each button having an initial class based on a string from an object. There is an event that changes this string when a button is clicked. However, the class does not get updated along with the string change. What could be the issue here?
<template>
<v-layout>
<v-btn v-for="cell in cells" :key='cell.id' v-bind:class='cell.color'
v-on:click='click(cell.id)'>
<p v-if="cell.win">win</p>
<p>{{cell.id}}</p>
</v-btn>
</v-layout>
</template>
<script>
export default {
data() {
return {
cells: {
},
winId: 0,
}
},
methods: {
generateCells() {
this.winId = Math.floor(Math.random() * 100);
for (var i = 0; i < 100; i++) {
this.cells[i] = {
id: i,
color: 'info'
}
}
},
click(id) {
if (this.cells[id].id === this.winId) {
alert('You win');
this.cells[id].color = 'success';
} else {
this.cells[id].color = 'warning';
}
}
},
created() {
this.generateCells();
}
}
</script>
I am anticipating that the button class will be updated whenever the respective object is updated. Although the .color property of the object gets updated, the class itself remains unchanged.