title: I need to implement the "Read more" function in some cards in quasar and vue js
body: <p>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 &quot;Show less&quot;.
  Please, someone that can help me to make this better.
  Here is a part of my code:</p>
  <p>template...</p>
  <pre><code>&lt;q-card class=&quot;card1 text-white col-8 col-sm-6 self-start q-gutter-x-sm&quot;&gt;
            &lt;q-card-section&gt;
              &lt;div class=&quot;text-h6&quot;&gt;{{ tit8 }}&lt;/div&gt;
            &lt;/q-card-section&gt;
            &lt;q-card-section&gt;
              {{ p7 }}
            &lt;/q-card-section&gt;
  
            &lt;q-card-section v-if=&quot;showText&quot; class=&quot;q-pt-none&quot;&gt;
              {{ ubikus }} &lt;br /&gt;
  
              &lt;a
                class=&quot;text-green text-h6&quot;
                href=&quot;#&quot;
                &gt;Ubikuss Project&lt;/a
              &gt;
            &lt;/q-card-section&gt;
            &lt;q-card-actions @click=&quot;toggleText&quot;&gt;
              &lt;q-btn flat label=&quot;Show More&quot; /&gt;
            &lt;/q-card-actions&gt;
          &lt;/q-card&gt;
  
          &lt;q-card
            class=&quot;card1 text-white col-8 col-sm-6 self-start q-gutter-x-sm&quot;&gt;
            &lt;q-card-section&gt;
              &lt;div class=&quot;text-h6&quot;&gt;{{ tit9 }}&lt;/div&gt;
            &lt;/q-card-section&gt;
            &lt;q-card-section&gt;
              {{ p8 }}
            &lt;/q-card-section&gt;
  
            &lt;q-card-section v-if=&quot;showText&quot; class=&quot;q-pt-none&quot;&gt;
              {{ translate}}&lt;br /&gt;
  
              &lt;a
                class=&quot;text-green text-h6&quot;
                href=&quot;#&quot;
                &gt;Translatoria Project&lt;/a
              &gt;
            &lt;/q-card-section&gt;
            &lt;q-card-actions @click=&quot;toggleText&quot;&gt;
              &lt;q-btn flat label=&quot;Show More&quot; /&gt;
            &lt;/q-card-actions&gt;
          &lt;/q-card&gt;
          &lt;q-separator vertical /&gt;
          &lt;br /&gt;
  </code></pre>
  <p>script..</p>
  <pre><code>export default defineComponent({
    data() {
      return {
        showText: false
  }}
  
    methods: {
      toggleText() {
        this.showText = !this.showText;
      },
    },
  </code></pre>