Vue.js, как добавить активный класс, если индекс равен 0

Question

это мой код

<li v-for="(data, index) in datas" :key="data.id" class="nav-item">
  <a :href="#" :class="'nav-link '+ { 'active' : index === 0 }"  data-toggle="tab">
    {{data.name}}
  </a>
</li>

, но вывод отображается только так

<a href="#" data-toggle="tab" class="nav-link [object Object]">test</a>

Answer 1

Вы можете добавить статический класс с динамическими привязками классов, взяв массив классов вместо конкатенации с помощью оператора '+'.

<li v-for="(data, index) in datas" :key="data.id" class="nav-item">
  <a :href="#" :class="[nav-link,{ 'active' : index === 0 }]"  data-toggle="tab">
    {{data.name}}
  </a>
</li>

Answer 2

Вы должны сделать это следующим образом, отделив связанный класс от не связанного класса:

<a :href="#" class="nav-link" :class="{ 'active' : index === 0 }"  data-toggle="tab">
  {{data.name}}
</a>