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; } } }
Advertisement
Answer
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; } } });