Tengo problemas al tratar de mostrar información diferente para diferentes pestañas. Tengo 3 pestañas y cada pestaña debe tener su propia lista de información para mostrar.
Actualmente, puedo colocar dos textos diferentes. Quiero colocar diferentes listas de oraciones para cada pestaña. ¿Cómo debo editar mi código?
Usando Vue.js + Vuetify.js:
Ver.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>Todo lo que necesita hacer es modificar su matriz de textos como
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>` ] y en su v-card-text puede hacer algo como
<v-card-text><div v-html="text"></div></v-card-text>