我需要在 quasar 和 vue js 中的某些卡片中实现 "Read more" 功能

Question

我在 quasar 中有超过 3 张 q-cards，当按下阅读更多按钮时应该显示更多文本，但这在所有卡片中都是如此，我需要单独显示。当您按下 btn 时，它会更改为“显示较少”。拜托，有人可以帮助我做得更好。这是我的代码的一部分：

模板...

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

脚本..

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

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

Answer 1

您可以创建循环来显示您的卡片并使用索引 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/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>

我需要在 quasar 和 vue js 中的某些卡片中实现 "Read more" 功能

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

javascript

vue.js

quasar

quasar-framework

vuejs3