VueJS dynamic tabs

Question

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$'
 }
 ]

Max Sinev · Accepted Answer · 2018-07-23 09:53:25Z

1

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

answered Jul 23, 2018 at 9:53

Max Sinev

6,0192 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohit Gupta · Accepted Answer · 2018-07-23 09:54:02Z

0

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>

answered Jul 23, 2018 at 9:54

Mohit Gupta

563 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 05:15:30Z

0

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>

edited Jul 16, 2022 at 5:15

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 23, 2018 at 9:57

gil

1,34813 silver badges20 bronze badges

Collectives™ on Stack Overflow

VueJS dynamic tabs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related