How to add active class to multiple checkbox in Vue.js?

Question

Example

var app = new Vue({
  el: '#app',
  data: {
    isActive : false,
    chkGenres : [],
    genres : [
      { "id" : "1", "name" : "Apple" },
      { "id" : "2", "name" : "Banana" },
      { "id" : "3", "name" : "Peach" }
    ]
  },
  methods: {
    isChecked(){
      this.isActive = ! this.isActive;
    }
  }
});

DEMO

Please check my demo

https://jsfiddle.net/byxda8eq/9/

What I want

I want to toggle class "active" to li tag when specified checkbox is checked or not.

I can not find a way to do that cuz my brain does not working everyday.

How to?

Answer 1

The issue here is that you are using a single isActive data option and binding it to all the checkboxes. So, when if any one of them is checked, it toggles the isActive value and is it bound to all of them thus all of the li class are changed.

A simple way to resolve this by adding a new property isActive to all the objects inside the genres array like:

genres : [
  { "id" : "1", "name" : "Apple", isActive: false },
  { "id" : "2", "name" : "Banana", isActive: false },
  { "id" : "3", "name" : "Peach", isActive: false }
]

and then update the template like:

<li v-for="genre in genres" :class="{ active : genre.isActive }">

and then update the click method like:

@click="isChecked(genre)"

and the main method like:

isChecked(genre){
  genre.isActive = !genre.isActive;
}

Fiddle Demo