Vue:使用v-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>