this is my code

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

but output only showing like this

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

this is my code

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

but output only showing like this

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

• javascript
• css
• vue.js
• vuejs2
• vue-ponent

2 Answers 2

You should do it as follows by separating the bound class from the not bound one :

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

You can add static class with dynamic class bindings by taking array of classes instead of concatenating by '+' operator.

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