Vue：使用v-tab为不同的tab显示不同的信息

Question

我在尝试为不同的选项卡显示不同的信息时遇到问题。我有 3 个选项卡，每个选项卡都需要有自己的信息列表来显示。

目前，我可以放置两个不同的文本。我想为每个选项卡放置不同的句子列表。我应该如何编辑我的代码？

使用 Vue.js + Vuetify.js:

View.vue

<template>
    <div id = "vaults" >
    
    <v-row class="justify-center">
      <v-card class="card">

          <div class="text-center card-title py-6">
            <h2>
              TAB_TITLE
            </h2>
          </div>

          <v-tabs
            v-model="tab"
            background-color="$peru"
            color="card"
            grow
          >
            <v-tab
              v-for="item in items"
              :key="item"
            >
              {{ item }}
            </v-tab>
          </v-tabs>

          <v-tabs-items v-model="tab">
            <v-tab-item
              v-for="text in texts"
              :key="text"
            >
              <v-card
                class="card"
                flat
              >
                <v-card-text>{{ text }}</v-card-text>
              </v-card>
            </v-tab-item>
          </v-tabs-items>

        </v-card>
    </v-row>

  </div>
</template>

<script>

  export default {

    components: {
    },

    data: function() {
      return {
        tab: null,
        items: [
          'Vault-1','Vault-2',
        ],
        texts: [ 
          'checkcheckcheck',
          'savesavesave',
        ],



      }
    },

    methods:{
      getImgUrl: function (path) { 
        return require('@/assets/' + path);
      }
    }

  }

</script>

Answer 1

您需要做的就是修改文本数组，例如

texts: [
`<p>Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero.</p>

<p>Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Aliquam lobortis. Aliquam lobortis. Suspendisse non nisl sit amet velit hendrerit rutrum.</p>`,

`<p>Morbi nec metus. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.</p>

<p>Suspendisse feugiat. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In hac habitasse platea dictumst. Fusce ac felis sit amet ligula pharetra condimentum.</p>`
]

并且在您的 v-card-text 中，您可以执行类似

的操作

<v-card-text><div v-html="text"></div></v-card-text>

Vue：使用v-tab为不同的tab显示不同的信息

Vue: Using v-tab to display different information for different tabs

javascript

vue.js

vuetify.js