Vue js toggle class inside a loop

Question

I have a template like this :

<div id="vue-instance">
  <ul>
    <li v-for="item in inventory" v-on:click="say()" v-bind:class="{active:isActive}" > {{ item.name }} - ${{ item.price }}
    </li>
  </ul>
</div>

And from my "controller" :

var vm = new Vue({
 el: '#vue-instance',
  data: {
    inventory: [
      {name: 'MacBook Air', price: 1000},
      {name: 'MacBook Pro', price: 1800},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Acer Aspire One', price: 300}
   ],
    isActive : false
 },
  methods: {
    say: function () {
      this.isActive = !this.isActive 
    }
 }

});

With this when i click one item from the list, all items are affected to active class. My question is how to toggle individual element?

Thank you.

Some version of this question comes up constantly here. Here is one answer. Here is another. — Bert
– Bert, Commented Nov 13, 2017 at 19:39
Possible duplicate of Selecting specific element in vue 2 inside v-for loop — webnoob
– webnoob, Commented Nov 13, 2017 at 20:14

Svendberg · Accepted Answer · 2017-11-13 19:35:40Z

2

You need a active flag on each item to be able to track them individually.

For example:

{name: 'MacBook Air', price: 1000, isActive: false},
{name: 'MacBook Pro', price: 1800, isActive: true}

You will then will be able to bind the class and click event to item.isActive by doing something like this:

<li v-for="item in inventory" v-on:click="item.isActive = !item.isActive" v-bind:class="{active:item.isActive}" > {{ item.name }} - ${{ item.price }}
</li>

edited Nov 13, 2017 at 19:35

answered Nov 13, 2017 at 19:29

Svendberg

3981 silver badge8 bronze badges

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

Comments

atrichkov · Accepted Answer · 2019-11-20 08:54:10Z

0

Notice that if class name contains dash "-" vue can't comile the template. I tried with class with this name "main-container" and face this issue.

answered Nov 20, 2019 at 8:54

atrichkov

4774 silver badges8 bronze badges

Collectives™ on Stack Overflow

Vue js toggle class inside a loop

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related