Как добавить динамический динамический класс vue js 2?

Question

мой взгляд, как это:

<ul class="nav nav-tabs nav-cat"> 
    @foreach($countries as $country) 
     <li role="presentation" class="{{ $loop->first ? 'active' : '' }}"><a href="javascript:;" data-toggle="tab" @click="$refs.player.getPlayer({{ $country->id }})">{{ ucfirst($country->name) }}</a></li> 
    @endforeach 
</ul> 

Я хочу добавить class="active" литий тег. Таким образом, при нажатии кнопки тег li будет активным

Как это сделать?

Answer 1

Использование JQuery:

$("#ID").addClass("active"); 

Использование Javascript:

document.getElementById("ID").className += " active"; 

Answer 2

Вы можете использовать v-for в цикле через переменную в vue.js и использовать индекс для проверки первого элемента. Используйте метод v-bind:class для динамического применения класса. Правильное решение для этого должно быть:

<ul class="nav nav-tabs nav-cat"> 
    <li v-for="(country, index) as {$countries}" role="presentation" :class="{index == 0 : 'active'}"><a href="javascript:;" data-toggle="tab" @click="$refs.player.getPlayer(country.id)">{{ ucfirst(country.name) }}</a> 
    </li> 
</ul>