Even though I successfully used jQuery within a Vue method to achieve this task, I am still searching for a pure Vue solution. My goal is to remove a class from one list item and then add the same class to the clicked list item. Below is the code snippet where I combined jQuery with Vue:
<ul class="manage-link">
<li class="current 1" @click="run(1,'In progress')">Awaiting approval</li>
<li class="2" @click="run(2,'In progress')">In progress</li>
<li class="3" @click="run(3,'Completed')">Completed</li>
<li class="4" @click="run(4,'Shipped')">Shipped</li>
<li class="5" @click="run(5,'Delivered')">Delivered</li>
<li class="6" @click="run(6,'Cancelled')">Cancelled</li>
<li class="7" @click="run(7,'Under review')">Under review</li>
<li class="pointer"></li>
</ul>
methods: {
run(num, str){
console.log('ok');
$(".manage-link>li").removeClass("current");
$('.'+num).addClass('current');
}
}
In the above code snippet, the str variable serves another purpose unrelated to this specific issue. While the current implementation works as intended, my objective remains to accomplish the same outcome using only Vue.js. Thank you.