Button color does not change when I click on it?

Question

I am new for learning vue.Now I have some problems.My code listed below is using for change the button color when you click on it.But now it can not work.Please give me some advice.Thank you very much!

 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>

Answer 1

When you are working with array in Vue 2 the best way to updating array indices by $set method.

 let app = new Vue({ el: '#app', data: { isActive: [true, false, false, false], movies: ['A', 'B', 'C', 'D'], }, methods: { onClick(index) { this.$set(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>