Add class on clicked list element, remove class from not clicked elements

Hi, I’d like to add a class ‘active’ to the selected li element, but remove it from the li elements not selected. What is the vue.js way to achieve that? (In my example I won’t use a v-for list).

<div id="app">
 <ul class="list">
   <li class="list-item" v-on:click="isActive = !isActive" v-bind:class="{ active: isActive }"> 
     Element 1
  <li class="list-item" v-on:click="isActive = !isActive" v-bind:class="{ active: isActive }"> 
     Element 2
  <li class="list-item" v-on:click="isActive = !isActive" v-bind:class="{ active: isActive }"> 
     Element 3

And in my js file:

 new Vue ({
 el: '#app',
 data: {
    isActive: false

Here are some examples I prepared earlier:


Thanks Herteby for your super quick reply. I have to add that I won’t use a v-for list in my example (the content will be generated with a liquid loop).

It could work without v-for too. If the items have a unique ID you could use that, or you could use the item object itself. But the general approach is to have a variable on the parent component that you set and compare with. What’s a liquid loop btw?


Thanks Herteby.

Do you have an example for setting a variable on the parent component?

Also is the approach of having a v-on:click and v-bind:class on each element as written down in my first post correct?

I’m bit confused what I have to achieve with javascript functions in the Vue instance and what can be done with Vue.js.

(It’s for a jekyll site in which I use the Liquid templating system (

Here’s an example without using v-for:
Seems a bit awkward to generate HTML with another framework instead of with Vue, but it could work I guess.


Wow, that’s straightforward - thanks loads. Very appreciated.

1 Like

Thank for awesome solution

1 Like

Your solution really help me so much. Thank you.

Thanks for giving this awesome solutions, can i give more solutions for add and remove classes in vue js

Thank you very much <3

I couldn’t do it. When select a item the other items continue to have the active class.

<div id="category">

    <category v-for="category in categories" :category="category"></category>


<template id="category-box">
          <span :class="{active: currentFilter == category}" @click="setFilter(category)">

const Category = Vue.component("category", {

  template: "#category-box",

  props: {

    "category": String,


  data: function() {

    return {

      currentFilter: "todos"



  methods: {

    setFilter: function(filter) {

      this.currentFilter = filter;

      this.$parent.$emit('filteredCategory', filter);




3 years later and still works like a charm! You just saved me a lot of time. God bless you man!

Just used it! Still works in 2020. It’s the bomb!