Add class to each item

I need some help, I'm new at vue.js. I have the following

<ul>
<li class="disable"><a href="#">Item 1</a></li>
<li class="active"><a href="#">Item 2</a></li> //Currently doing mouseover
<li class="disable"><a href="#">Item 3</a></li>
</ul>


How can I do a mouseover in an item and add an "active" class, and add a "disable" class to the other items?

mouseover

"Basically what I want is that when I mouseover any item, the "active" class has a more "disable" class and when doing mouseout, just delete the class "disable" but keep the class "active" "

:hover

1 Answer
1

Assuming initially one is acive.

Switching between disable and active class without using css:hover.

disable

active

:hover

setLiActive(event)
event.target.classList.remove('disable');
event.target.classList.add('active');
,
setLiDisable(event)
event.target.classList.remove('active');
event.target.classList.add('disable');



Using mouseover (to add active class) and mouseleave (to add disable class)

mouseover

mouseleave

<ul>
<li class="disable" @mouseleave="setLiDisable($event)" @mouseover="setLiActive($event)" ><a href="#">Item 1</a></li>
<li class="disable" @mouseleave="setLiDisable($event)" @mouseover="setLiActive($event)"><a href="#">Item 2</a></li>
<li class="disable" @mouseleave="setLiDisable($event)" @mouseover="setLiActive($event)"><a href="#">Item 3</a></li>
</ul>


function callMe()
var vm = new Vue(
el: '#root',
data:
isActive:true
,
created()

,
methods:
setLiActive(event)
event.target.classList.remove('disable');
event.target.classList.add('active');
,
setLiDisable(event)
event.target.classList.remove('active');
event.target.classList.add('disable');




)

callMe();

.active a
color:red

.disable a
pointer-events: none;
cursor: default;
color:grey;


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
<ul>
<li class="disable" @mouseleave="setLiDisable($event)" @mouseover="setLiActive($event)" ><a href="#">Item 1</a></li>
<li class="disable" @mouseleave="setLiDisable($event)" @mouseover="setLiActive($event)"><a href="#">Item 2</a></li>
<li class="active" @mouseleave="setLiDisable($event)" @mouseover="setLiActive($event)"><a href="#">Item 3</a></li>
</ul>
</div>

add active class

disable class on mouseout

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.