Vue.js To add class active when click and remove the previous one
Solution 1
I'm new to Vue but an easy way to turn your JQuery example into Vue.js is this: Jsfiddle demo
Basically, you need to store the active element in your Vue data, and set the class based on in. You could use a v-for
to render the list.
The HTML
part:
<div id="app">
<ul>
<li @click="activate(1)" :class="{ active : active_el == 1 }">Link 1</li>
<li @click="activate(2)" :class="{ active : active_el == 2 }">Link 2</li>
<li @click="activate(3)" :class="{ active : active_el == 3 }">Link 3</li>
</ul>
</div>
The Vue.js
:
var app = new Vue({
el:"#app",
data:{
active_el:0
},
methods:{
activate:function(el){
this.active_el = el;
}
}
});
Solution 2
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/
Haroon Aslam
want to learn and solve problems for me and for others
Updated on August 13, 2021Comments
-
Haroon Aslam over 2 years
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
http://jsfiddle.net/fiddleyetu/9ff79/
$(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
<div class="conversion"> <div class="file has-text-centered icon-active-color" v-on:click="activeiconc"> <img src="../imgs/png.png"/> <h4>.PNG</h4> </div> <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc,}"> <img src="../imgs/pdf.png"/> <h4>.PDF</h4> </div> <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc }"> <img src="../imgs/jpg.png"/> <h4>.JPG</h4> </div> <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc }"> <img src="../imgs/psd.png"/> <h4>.PSD</h4> </div> </div>
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; } } }