Implementing dynamic class bindings with Vue.js using v-for

Question

Implementing dynamic class bindings with Vue.js using v-for

I am currently using a v-for loop in Vue.js to create a list of items populated with data from an API. Here is an example of the items array:

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 am looking for a solution where clicking on a div will add the class "active", and if it already has the class then it should be removed (toggled). Additionally, multiple items should be able to be selected.

Is there a way to achieve this without adding a boolean variable to the items array or moving each item into a separate component?

javascript vue.js v-for

Answer 1

Answer №1

Here is the solution for you.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0274776742302c372c3335">[email protected]</a>/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>

Explore the working code on JS Fiddle: https://jsfiddle.net/eywraw8t/250008/

Answer 2

Here is the solution for you.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0274776742302c372c3335">[email protected]</a>/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>

Explore the working code on JS Fiddle: https://jsfiddle.net/eywraw8t/250008/

Answer 3

Answer №2

MainComponent.vue

<template>
     <div>
        <div 
        v-for="(item, index ) in items" 
        :key="index"
        :class="{ active: index === activeIndex}"
        >
         // Displaying looped items from data
         // Button to toggle item activation
            <button @click="activateItem(index)"> Make this item active </button>
        </div>
    </div>
</template>

Data and Methods

<script>
export default {
    data() {
        return {
            activeIndex: null,
        };
    },
    methods: {
        activateItem(index) {
            this.activeIndex = index;
        },
    },
};
</script>

Answer 4

MainComponent.vue

<template>
     <div>
        <div 
        v-for="(item, index ) in items" 
        :key="index"
        :class="{ active: index === activeIndex}"
        >
         // Displaying looped items from data
         // Button to toggle item activation
            <button @click="activateItem(index)"> Make this item active </button>
        </div>
    </div>
</template>

Data and Methods

<script>
export default {
    data() {
        return {
            activeIndex: null,
        };
    },
    methods: {
        activateItem(index) {
            this.activeIndex = index;
        },
    },
};
</script>

Implementing dynamic class bindings with Vue.js using v-for

Answer №1

Answer №2

Similar questions

If you try to wrap an object with an anonymous function, you'll receive an error message

In JavaScript, when a div element contains an iframe, the click event will not trigger on the div

Modifying Data with MomentJS when Saving to Different Variable

Using the code `$("img").one('load'` can trigger only a single load event without repetition

Display information from dynamically generated pages using Gatsby JS sourcing data from CSV files

What is the best way to update parent data from a child component?

Creating point illustrations with Three.js

Using multiple conditions in an angular ngif statement to create a variable

Is there a way to resolve the issue of Vue's v-html not supporting promises, etc.? It seems that all Vue binding values do not support promises

Tips for accessing the @keyframes selector and extracting the value from it

Using an Angular route to trigger the resolution of data from a service

What is the method for providing a date format choice in JSON?

Utilizing One-to-Many Microphone Streaming Technology

Using Typescript to typecast in D3.js

JavaScript TweenJS is a powerful library that simplifies

Navigating through a mergeMap observable with an undefined value

What is the best way to show a macOS progress pie loading icon alongside files?

adding numerous items to an array using JavaScript

The function for utilizing useState with a callback is throwing an error stating "Type does not have

Utilize the ESLint plugin to manage unresolved import paths in Next.js modules