I need to implement the "Read more" function in some cards in quasar and vue js

Question

I have more than 3 q-cards in quasar that should display more text when the read more button is pressed, but this does it in all the cards and I need it to be individually. And when you press the btn is change to "Show less". Please, someone that can help me to make this better. Here is a part of my code:

template...

<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 />

script..

export default defineComponent({
  data() {
    return {
      showText: false
}}

  methods: {
    toggleText() {
      this.showText = !this.showText;
    },
  },

Answer 1

You can create loop to display your cards and use index to show/hide:

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/[email protected]/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/[email protected]/dist/quasar.umd.prod.js"></script>