Пытаюсь разобраться в vue.js. Есть простой список:
<div id="app">
<ul>
<li class="item">
<a href="#" class="link">item 1</a>
</li>
<li class="item">
<a href="#" class="link" v-on:click="toggle">item 2</a>
</li>
</ul>
</div>
Нужно при клике на ссылку присваивать только этому пункту активный класс (т.е. у других пунктов - убирать активность).
С jquery я бы сделала так:
$('.link').on('click', function(e){
e.preventDefault();
var $this = $(this),
item = $this.closest('.item');
if(!item.hasClass('active')){
item.addClass('active')
.siblings()
.removeClass('active');
} else {
item.removeClass('active');
}
});
.active {
border: 1px solid red;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="app">
<ul>
<li class="item">
<a href="#" class="link">item 1</a>
</li>
<li class="item">
<a href="#" class="link" v-on:click="toggle">item 2</a>
</li>
</ul>
</div>
Вопрос: как можно реализовать подобное переключение классов с помощью vue (присвоение класса не ссылке, а пункту li
-шке)?
var app = new Vue({
el: '#app',
data: {
},
methods: {
toggle: function(e){
e.preventDefault();
alert('click');
}
}
});
.active {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
<ul>
<li class="item">
<a href="#" class="link">item 1</a>
</li>
<li class="item">
<a href="#" class="link" v-on:click="toggle">item 2</a>
</li>
</ul>
</div>