What Is The Simplest Way To Toggle A Class On/off Of An Element Without Affecting Other Elements Using Vue.js?

I have seen several examples of how to toggle a class in Vue.js like this: Clicking the element toggles if it is active true or false and you are then toggling the class. This is

Solution 1:

The issue is that by binding a parent property to each instance, they share the parent's state and no longer represent their own state. One "vue-y" solution is to create a unique isActive state per instance via individual properties or an array of properties.

newVue({
  el: "#app",
  data: {
    isActive1: false,
    isActive2: false, 
    isActive3: false,
  }
});

.demo {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.active {
  border: #000 solid 3px;
 }

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.js"></script><divid="app"><divclass="demo" @click.self="isActive1 = !isActive1":class="{active: isActive1}"></div><divclass="demo" @click.self="isActive2 = !isActive2":class="{active: isActive2}"></div><divclass="demo" @click.self="isActive3 = !isActive3":class="{active: isActive3}"></div></div>

There are additional benefits to this type of unique representation. You may need to do more at a future date than just toggle a class on and off. You now have a way to identify active elements which will lead to a more scaleable application.

Keep in mind that at this point it would make more sense to encapsulate your behavior into a component so that you can reuse it with isolated scope.

Solution 2:

You can do that with java script like that:

newVue({
	el: "#app",
	methods:{
		setActive(event){
		   event.target.classList.toggle("active");
		}
	}
});

.demo {
    width: 100px;
    height: 100px;
    background-color: red;
    display: inline-block;
}

.active {
    border: #000 solid 3px;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.js"></script><divid="app"><divclass="demo" @click="setActive"></div><divclass="demo" @click="setActive"></div><divclass="demo" @click="setActive"></div></div>

Or as you mentioned you can create a component like that:

Vue.component('test-component',{
    template: `<div class="demo" @click="isActive = !isActive" :class="{active: isActive}"></div>`,
    data(){
        return {
            isActive: false
        }
    }
});

html:

<divid="app"><test-component></test-component><test-component></test-component><test-component></test-component></div>

Solution 3:

I know the vuejs guide (Class and Style Bindings) uses data properties, but is this mandatory?

newVue({
  el: "#app",
  data: {},
  methods: {
    toggleMe: function (event) {
      event.target.classList.toggle('active');
    }
  }  
});

.demo {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.active {
  border: #000 solid 3px;
 }

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.js"></script><divid="app"><divclass="demo" @click="toggleMe"></div><divclass="demo" @click="toggleMe"></div><divclass="demo" @click="toggleMe"></div></div>