How to put class=“active” to first element in vuejs for loop

Question

I\'m trying to learn vue.js. I\'m adding list of elements, I want to add class=\"active\" only to the first element in the for loop. following is my code:

Answer 1

The easiest solution is to check every element if index is equal to 0 and then setting the active class (or the class you needed). Here is the code of class definition:

:class="{ 'active': index === 0 }"

Here is working example of making Bootstrap Tabs:

    

        {{some_array[index]}}
    

Also, if you have multiple classes you can mix them like this:

:class="['tab-pane fade', (index === 0 ? 'active in' : 'something_else')]"