[Vuejs]-How do I add 'active' class dynamically on vue js 2?

You can use v-for to loop through a variable in vue.js and use index to check for the first element. Use v-bind:class to apply a class dynamically. The correct solution for doing this should be:

<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>

Using JQuery:

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

Using Javascript:

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