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?

What <li> tag? What checkbox?

Phil
– Phil

2020-07-03 04:32:09 +00:00
Commented Jul 3, 2020 at 4:32 — Phil
– Phil, Commented Jul 3, 2020 at 4:32

palaѕн · Accepted Answer · 2020-07-03 04:31:43Z

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

answered Jul 3, 2020 at 4:31

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

Collectives™ on Stack Overflow

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

Example

DEMO

What I want

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example

DEMO

What I want

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related