CODEWITHSUNDEEP
vue.jstabsvuejs2
Mark
Mark

Reputation: 25

VueJS dynamic tabs

I need your help with one simple thing. I dont see how to display content according the current tab.

I'm pretty sure the solution so close, something like v-if on content part.

<button v-for="tab in tabs"
 v-bind:key="tab"
 v-bind:class="['tab-button', { active: currentTab === tab }]"
 v-on:click="currentTab = tab">
{{ tab }}
</button>

<div v-for="(fruit, fruit) in fruits" :key="fruit">
 <p>{{ fruit.name }}</p>
 <p >{{ fruit.price }}</p>
</div>

<div v-for="(vege, vege) in veges" :key="vege">
 <p>{{ vege.name }}</p>
 <p>{{ vege.price }}</p>
</div>

script part

currentTab: 'fruits',
tabs: ['fruits', 'veges'],
fruits: [
 {
  name: 'fruit', price: '3$'
 }
],
veges: [
 {
  name: 'vege', price: '1$'
 }
 ]

Upvotes: 0

Views: 5599

Answers (3)

gil
gil

Reputation: 1348

Like this with v-if inside template (if you want to toggle more than one element according to Vue.js Docs)

 <template v-if="currentTab === 'fruits'">
    <div v-for="(fruit, index) in fruits" :key="index">
      <p>{{ fruit.name }}</p>
      <p >{{ fruit.price }}</p>
    </div>
 </template>
 <template v-else>
     <div v-for="(vege, index) in veges" :key="index">
       <p>{{ vege.name }}</p>
       <p>{{ vege.price }}</p>
     </div>
</template>

Upvotes: 0

Mohit Gupta
Mohit Gupta

Reputation: 56

try this:

<div v-if="currentTab === 'fruits'" v-for="(fruit, fruit) in fruits" :key="fruit">
 <p>{{ fruit.name }}</p>
 <p >{{ fruit.price }}</p>
</div>

<div v-if="currentTab === 'veges'" v-for="(vege, vege) in veges" :key="vege">
 <p>{{ vege.name }}</p>
 <p>{{ vege.price }}</p>
</div>

Upvotes: 0

Max Sinev
Max Sinev

Reputation: 6019

Yes, just add v-if for each tab content(add wrapper because v-for has higher priority over v-if, added wrapper):

 <button v-for="tab in tabs"
   v-bind:key="tab"
   v-bind:class="['tab-button', { active: currentTab === tab }]"
   v-on:click="currentTab = tab">
   {{ tab }}
 </button>
 <div v-if="currentTab === tabs[0]">
     <div v-for="(fruit, index) in fruits" :key="index">
      <p>{{ fruit.name }}</p>
      <p >{{ fruit.price }}</p>
     </div>
 </div>
 <div v-if="currentTab === tabs[1]">
     <div v-for="(vege, vege) in veges" :key="vege">
      <p>{{ vege.name }}</p>
      <p>{{ vege.price }}</p>
    </div>
 </div>

P.S. I recommend to use object instead of array, to use tabs like this v-if="currentTab === tabs.fruits";

Upvotes: 1

Related Questions