• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

141
Vistas
Necesito implementar la función "Leer más" en algunas tarjetas en quasar y vue js

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; }, },
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda