'Hello everyone, i need some help to implement a show more button with quasar and vuejs

I have this part of code, i need add the action to show more or less the text.

<q-card
          class="my-card text-white"
          style="background: radial-gradient(circle, #229954 20%, #014a88 90%)"
        >
          <q-card-section>
            <div class="text-h6">{{ titulo }}</div>
          </q-card-section>

          <q-card-section class="q-pt-none">
            {{ traducir}}
          </q-card-section>
           <q-card-actions>
            <q-btn flat label="Show More" />
          </q-card-actions>
        </q-card>
vue.jsquasar


Solution 1:[1]

first you add the clickevent that calls a method called toggleText then add a conditional v-if to the section you want to toggle

<q-card
          class="my-card text-white"
          style="background: radial-gradient(circle, #229954 20%, #014a88 90%)"
        >
          <q-card-section>
            <div class="text-h6">{{ titulo }}</div>
          </q-card-section>

          <q-card-section v-if="showText" class="q-pt-none">
            {{ traducir}}
          </q-card-section>
           <q-card-actions @click="toggleText">
            <q-btn flat label="Show More" />
          </q-card-actions>
        </q-card>

then you create the boolean varibale that will be used in our v-if condition then create the toggleText method that toggles the boolean value.

<script>
export default {
  name: 'showmore',
  data () {
    return {
      showText: false,
    }
  },
  methods: {
    toggleText () {
      this.showText = !this.showText;
    }
  }
}
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Richard Gaskin

Related Questions