Vue.js To add class active when click and remove the previous one

Question

I want to achieve this active link on my div element here you can see the example that i want to do with my code

$(function() {
  $( 'ul.nav li' ).on( 'click', function() {
        $( this ).parent().find( 'li.active' ).removeClass( 'active' );
        $( this ).addClass( 'active' );
  });
});

in here using vue.js i can't do the active link on my div elements

here is my code for the elements on which i have to do the links active

js

 export default {
components: {
  MainLayout
},
    data: function(){
    return {
      logo: false,
      color:false,
      list:true,
      grid:false,
      deletebtn:false,
      isImageModalActive: false,
      activerow: false,
      activeiconc:false,
    }
  },
  methods:{ 

    showgrid:function(){
        this.grid = true;
        this.list = false;

    },
    showlist:function(){
        this.list ^=true;
        this.grid = false
    },
    showLogo:function(){
        this.logo ^= true;
        this.color = false; 
        this.deletebtn ^= true;
        this.activerow ^= true
    },
    showColor:function(){
        this.color ^= true;
        this.logo = false;
    },
    activeicon:function(){
        this.activeiconc ^= true;
    }
  }
}

user_2181576 · Answer

If you want to active directly via code, VueJS allows you to bind the active of the anchor tag directly to the index of the li element so that when the vuejs variable bound to the index changes, the active also changes. Check these two links for more details

This is the crux of the solution

:class="{current:i == current}

available on the fiddle below and another post that explains in story format how anchor active can be dynamically controlled in vuejs

https://jsfiddle.net/Herteby/kpkcfcdw/

https://stackoverblow.wordpress.com/2021/04/03/how-modern-javascript-makes-click-simulation/

user_607230 · Answer

You can use more easily way like below instead of adding and removing active class:

This paradigm provides dynamically set multiple different class for different scenarios.

This is from Vue 2 official documentation. There are many ways.

Vue.js To add class active when click and remove the previous one

3 Answers