Vuejs add and remove classes with v-for

Question

i'm making a list of items with vuejs v-for loop. I have some API data from server.

items: [
   {
       foo: 'something',
       number: 60
   },
   {
       foo: 'anything',
       number: 15
   },
   {
       foo: 'text',
       number: 20,
   }
]

Template

<div v-for="(item,index) in items" :key="index">
     <div :class="{ active: ????}" @click="toggleActive">
          {{ item.foo }} 
          {{ item.number }}
     </div>
</div>

JS

methods: {
    toggleActive() {
        //
    }
}

I need following: When i'm clicking on div add class active, if i have already active class - remove active class.( toggle ). Also i can select multiple items.

How can i do this? I don't have boolean variable in items array, and i shouldn't move item in a separate component

please verify your template code, it seems incorrect. especially at `v-for(item, index)` — Daksh M., Aug 08 '18 at 06:27
Possible duplicate of [Vuejs toggle class in v-for](https://stackoverflow.com/questions/51724595/vuejs-toggle-class-in-v-for) — Lars Beck, Aug 08 '18 at 06:30
[You've already asked this question](https://stackoverflow.com/questions/51724595/vuejs-toggle-class-in-v-for) — Lars Beck, Aug 08 '18 at 06:32
Possible duplicate of [Vue.js toggle class on click](https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click) — Muhammad Usman, Aug 08 '18 at 06:34
It's not a duplicate of https://stackoverflow.com/questions/33731939/vue-js-toggle-class-on-click, i need to toggle in v-for with dynamic data. Read the question, before commenting — mtleppay, Aug 08 '18 at 06:51

Julian Paolo Dayag · Accepted Answer · 2018-08-08T06:55:38.110

7

Here you go.

new Vue({
  el: "#app",
  data: {
    items: [{
        foo: 'something',
        number: 60
      },
      {
        foo: 'anything',
        number: 15
      },
      {
        foo: 'text',
        number: 20,
      }
    ]
  },
  methods: {
    toggleActive(index) {
      let item = this.items[index];

      item.active = !item.active;

      this.$set(this.items, index, item);

    }
  }
})

.active {
  color: red;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <div v-for="(item,index) in items" :key="index">
    <div :class="{ active: item.active}" @click="toggleActive(index)">
      {{ item.foo }} {{ item.number }}
    </div>
  </div>
</div>

Here's a JS Fiddle: https://jsfiddle.net/eywraw8t/250008/

edited Aug 08 '18 at 06:55

answered Aug 08 '18 at 06:48

Julian Paolo Dayag

3,562
3
20
32

by the way, I forgot to add condition to change from true to false and false to true. but I think you already know what to do. – Julian Paolo Dayag Aug 08 '18 at 06:53
Just simple: `item.active = !item.active;` – Julian Paolo Dayag Aug 08 '18 at 06:54

score 3 · Answer 2 · edited Sep 12 '20 at 11:38

App.vue

<template>
     <div>
        <div 
        v-for="(item, i ) in items" 
        :key="i"
        :class="{ active: i === activeItem}"
        >
         // some looped items from data here
         // button for active toggle 
            <button @click="selectItem(i)"> make item active </button>
        </div>
    </div>
</template>

Data and Methods

<script>
export default {
    data() {
        return {
            activeItem: null,
        };
    },
    methods: {
        selectItem(i) {
            this.activeItem = i;
        },
    },
};
</script>

Vuejs add and remove classes with v-for

2 Answers2