I am currently learning vue and facing some challenges. The code I have is supposed to change the button color when clicked, but it's not working as expected. Any advice on how to fix this issue would be greatly appreciated. Thank you!
let app = new Vue({
el: '#app',
data: {
isActive: [true, false, false, false],
movies: ['A', 'B', 'C', 'D'],
},
methods: {
onClick(index) {
this.isActive[index] = !this.isActive[index];
}
},
});ul li {
list-style: none;
}
.active {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item, index) in movies">
<button :class="{active: isActive[index]}" @click="onClick(index)">{{ item }}</button>
</li>
</ul>
</div>