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>

You are directly changing the array index value, which does not trigger reactivity and rerender of the component. — SMAKSS
– SMAKSS, Commented Dec 14, 2020 at 16:08

Gurkan Ugurlu · Accepted Answer · 2020-12-14 16:04:46Z

2

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>

answered Dec 14, 2020 at 16:04

Gurkan Ugurlu

4672 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Button color does not change when I click on it?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related