javascript – How to display different content in different tabs in vueJS-ThrowExceptions

Exception or error:

I am trying to build a website using vueJS framework and vuetify template. I want to display different content under different tabs. I have written a code, but the same content appears in all the three tabs. How do I go about doing this? I have attached the code here.

  <v-tabs
    centered
    color="deep-purple accent-1"
    slot="extension"
    slider-color="yellow"
    v-model="model"
  >
    <v-tab href="#tab-1">
    Solar Panels
   </v-tab>

   <v-tab href="#tab-2">
   CCTV Panels
  </v-tab>

  <v-tab href="#tab-3">
  LED Lights
 </v-tab>
 </v-tabs>

 <v-tabs-items>
   <v-tabs-content id="tab-1">
     <v-card flat>
       <v-card-text>This is the first tab</v-card-text>
     </v-card>
   </v-tabs-content>
   <v-tabs-content id="tab-2">
     <v-card flat>
       <v-card-text>This is the second tab</v-card-text>
     </v-card>
   </v-tabs-content>
   <v-tabs-content id="tab-3">
     <v-card flat>
       <v-card-text>This is the third tab</v-card-text>
     </v-card>
   </v-tabs-content>
 </v-tabs-items>

How to solve:

I used to have the same problem. look try this.

Basic tabs are comprised of a series of title and the corresponding content related to each title. Defining individual components is done dynamically using a for loop to create tabs

<v-tabs
          fixed-tabs
          v-model="tab"
        >
          <v-tabs-slider color="amber darken-3"></v-tabs-slider>
          <v-tab
            v-for="(item, index) in items"
            :class="{active: currentTab === index}"
            @click="currentTab = index"
            :key="item"
          >
            {{ item }}
          </v-tab>
        </v-tabs>

       // Display different content here
        <v-tabs-items v-model="tab">
          <v-card flat>            
            <div v-show="currentTab === 0"><v-card-text>Tab0 content</v-card-text></div>
            <div v-show="currentTab === 1"><v-card-text>Tab1 content</v-card-text></div>
            <div v-show="currentTab === 2"><v-card-text>Tab2 content</v-card-text></div>
            <div v-show="currentTab === 3"><v-card-text>Tab3 content</v-card-text></div>
            <div v-show="currentTab === 4"><v-card-text>Tab4 content</v-card-text></div>
          </v-card>
        </v-tabs-items>
      </v-card>


export default {
   data () {
     return {
      currentTab: 0,
      tab: null,
      items: ['tab0', 'tab1', 'tab2', 'tab3', 'tab4'],
     }
  }

###

<v-card>
   <v-tabs background-color="white" color="deep-purple accent-4" right>
      <v-tab>Landscape</v-tab>
      <v-tab>City</v-tab>
      <v-tab>Abstract</v-tab>
      <v-tab-item v-for="n in 3" :key="n">
         <v-container fluid>
            <v-card-text v-if="n==1">This is the first tab</v-card-text>
            <v-card-text v-if="n==2">This is the second tab</v-card-text>
            <v-card-text v-if="n==3">This is the Third tab</v-card-text>
         </v-container>
      </v-tab-item>
   </v-tabs>
</v-card>

###

Vuetify has a great documentation in my opinion and easy to follow.

From vuetify tabs

the “html” part

<div id="app">
  <v-app id="inspire">
    <div>
      <v-tabs
        v-model="active"
        color="cyan"
        dark
        slider-color="yellow"
      >
        <v-tab
          v-for="n in 3"
          :key="n"
          ripple
        >
          Item {{ n }}
        </v-tab>
        <v-tab-item
          v-for="(text, index) in texts"
          :key="index"
        >
          <v-card flat>
            <v-card-text>{{ text }}</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs>

      <div class="text-xs-center mt-3">
        <v-btn @click.native="next">next tab</v-btn>
      </div>
    </div>
  </v-app>
</div>

the “javascript(vue)” part:

new Vue({
  el: '#app',
  data () {
    return {
      active: null,
      texts: ['first tab', 'second tab', 'third tab']
    }
  },
  methods: {
    next () {
      const active = parseInt(this.active)
      this.active = (active < 2 ? active + 1 : 0).toString()
    }
  }
})

Note that this is modified little bit from vuetify documentation example

Leave a Reply

Your email address will not be published. Required fields are marked *