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

Question

I am having problems trying to display different information for different tabs. I have 3 tabs and every tab needs to have its own list of information to display.

Currently, I can place two different texts. I want to place different lists of sentences for each tab. How should I edit my code?

Using 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

All you need to do is modify your texts array like

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

and in your v-card-text you can do something like

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