Tengo más de 3 q-cards en quasar que deberían mostrar más texto cuando se presiona el botón leer más, pero esto lo hace en todas las tarjetas y necesito que sea individualmente. Y cuando presionas el botón se cambia a "Mostrar menos". Por favor, alguien que pueda ayudarme a mejorar esto. Aquí hay una parte de mi código:
modelo...
<q-card class="card1 text-white col-8 col-sm-6 self-start q-gutter-x-sm"> <q-card-section> <div class="text-h6">{{ tit8 }}</div> </q-card-section> <q-card-section> {{ p7 }} </q-card-section> <q-card-section v-if="showText" class="q-pt-none"> {{ ubikus }} <br /> <a class="text-green text-h6" href="#" >Ubikuss Project</a > </q-card-section> <q-card-actions @click="toggleText"> <q-btn flat label="Show More" /> </q-card-actions> </q-card> <q-card class="card1 text-white col-8 col-sm-6 self-start q-gutter-x-sm"> <q-card-section> <div class="text-h6">{{ tit9 }}</div> </q-card-section> <q-card-section> {{ p8 }} </q-card-section> <q-card-section v-if="showText" class="q-pt-none"> {{ translate}}<br /> <a class="text-green text-h6" href="#" >Translatoria Project</a > </q-card-section> <q-card-actions @click="toggleText"> <q-btn flat label="Show More" /> </q-card-actions> </q-card> <q-separator vertical /> <br />guion..
export default defineComponent({ data() { return { showText: false }} methods: { toggleText() { this.showText = !this.showText; }, },Puede crear un bucle para mostrar sus tarjetas y usar el índice para mostrar/ocultar:
const app = Vue.createApp({ data() { return { projects: [{title: 'aaa', nr: 7, text: 'ubikus', link: 'Ubikuss Project'}, {title: 'bbb', nr: 8, text: 'translate', link: 'Translatoria Project'}, {title: 'ccc', nr: 9, text: 'other', link: 'some'}], showText: null } }, methods: { toggleText(idx) { this.showText === idx ? this.showText = null : this.showText = idx }, }, }) app.use(Quasar) app.mount('#q-app') <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> <link href="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.prod.css" rel="stylesheet" type="text/css"> <div id="q-app"> <div v-for="(project, index) in projects" :key="index"> <q-card class="card1 col-8 col-sm-6 self-start q-gutter-x-sm"> <q-card-section> <div class="text-h6">{{ project.title }}</div> </q-card-section> <q-card-section> {{ project.nr }} </q-card-section> <q-card-section v-if="showText === index" class="q-pt-none"> {{ project.text }} <br /> <a class="text-green text-h6" href="#">{{ project.link }}</a> </q-card-section> <q-card-actions @click="toggleText(index)"> <q-btn flat label="Show More" /> </q-card-actions> </q-card> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script> <script src="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.umd.prod.js"></script>