Vuejs 2.x How to remove active class when click on non ul link

Question

I am trying to remove active class from all Li has same class but could not get right code to do that in vuejs 2.x.

my code example is here : jsfiddle

var app = new Vue({
  el:"#app",
  data:{
    active_el:0
  },
  methods:{
    activate:function(el){
    	if(el === 0) {
        // remove active class from all Ul>>Li
        }else {
        this.active_el = el;
        }
    }
  }
});

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
<a href="#" @click.native="activate(0)" :class="{ active : active_el == 0 }">link 0</a>
 <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>
  
  <ul>
    <li @click="activate(4)" :class="{ active : active_el == 4 }">Link 1</li>
    <li @click="activate(5)" :class="{ active : active_el == 5 }">Link 2</li>
    <li @click="activate(6)" :class="{ active : active_el == 6 }">Link 3</li>
  </ul>
</div>

active class should be removed from all li under Ul tag when link0 is clicked.

kyun · Accepted Answer · 2018-08-10 13:29:04Z

2

var app = new Vue({
  el:"#app",
  data:{
    active_el:0
  },
  methods:{
    activate:function(el){

    	this.active_el = el;

        /*if(el === 0) {
        // remove active class from all Ul>>Li
        this.active_el = 0;
        }else {
        this.active_el = el;
        }*/
    }
  }
});

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
<p href="#" @click="activate(0)" :class="{ active : active_el == 1 }">link 0</p>
<br/> <br/>
 <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>
  <br/> <br/>
  <ul>
    <li @click="activate(4)" :class="{ active : active_el == 4 }">Link 1</li>
    <li @click="activate(5)" :class="{ active : active_el == 5 }">Link 2</li>
    <li @click="activate(6)" :class="{ active : active_el == 6 }">Link 3</li>
  </ul>
</div>

I think you just forgot to input the condition when el === 0

edited Aug 10, 2018 at 13:29

answered Aug 10, 2018 at 13:21

kyun

10.4k9 gold badges36 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bennett Dams Over a year ago

You don't even need the if and else for this example, as the first link will emit a 0 as function parameter.

Ravi Anand Over a year ago

I tried this, it's not working unfortunately. you can have a look in shared jsfiddle link.

brunouno · Accepted Answer · 2018-08-10 14:37:40Z

Just remove the .native tag since the <a> is a native element by itself. Also, you can simplify your activate method:

var app = new Vue({
  el:"#app",
  data:{
    active_el:0
  },
  methods:{
    activate:function(el){
        this.active_el = el;
    }
  }
});

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
<a href="#" @click="activate(0)" :class="{ active : active_el == 0 }">link 0 {{ active_el }}</a>
 <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>
  
  <ul>
    <li @click="activate(4)" :class="{ active : active_el == 4 }">Link 1</li>
    <li @click="activate(5)" :class="{ active : active_el == 5 }">Link 2</li>
    <li @click="activate(6)" :class="{ active : active_el == 6 }">Link 3</li>
  </ul>
</div>

PolygonParrot · Accepted Answer · 2018-08-10 14:20:03Z

If you add a console.log to the activate function you will see that the @click.native in the a tag does not work. I removed the '.native' (+ the if else) and the snipped works for me.

More infos about the .native: Vue @click.native not working?

var app = new Vue({
  el:"#app",
  data:{
    active_el:0
  },
  methods:{
    activate:function(el){
        console.log(el);
    	this.active_el = el;
    }
  }
});

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
<a href="#" @click="activate(0)" :class="{ active : active_el == 0 }">link 0</a>
 <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>
  
  <ul>
    <li @click="activate(4)" :class="{ active : active_el == 4 }">Link 1</li>
    <li @click="activate(5)" :class="{ active : active_el == 5 }">Link 2</li>
    <li @click="activate(6)" :class="{ active : active_el == 6 }">Link 3</li>
  </ul>
</div>

Collectives™ on Stack Overflow

Vuejs 2.x How to remove active class when click on non ul link

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related