javascript - vueJS如何在不同选项卡显示不同内容

Question

我正在尝试使用 vueJS 框架和 vuetify 模板构建一个网站。我想在不同的选项卡下显示不同的内容。我写了一段代码，但是三个选项卡中都出现相同的内容。我该怎么做呢？我已在此处附上代码。

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

Answer 1

我以前也遇到过同样的问题。看看试试这个。

基本选项卡由一系列标题和与每个标题相关的相应内容组成。使用 for 循环创建选项卡来动态定义各个组件

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