CODEWITHSUNDEEP
javascriptcssvue.jsvuejs2vue-component
Job Rajan
Job Rajan

Reputation: 195

Vue.js how to add active class if index is 0

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>

Upvotes: 3

Views: 3568

Answers (2)

Jaspreet Jolly
Jaspreet Jolly

Reputation: 1313

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>

Upvotes: 2

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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>

Upvotes: 4

Related Questions