render unique button inside v-for vue js

user_6927069 0
Viewed 210

In my code, I tried to render series of card by v-for. each card has a button @click="expanded = !expanded" which make expand itself to show the rest of information. As a result of pressing one of the buttons, the others will be pressed too. How can I prevent this from happening?

my code:

<div v-for="item in userDataRefList" :key="item.postedBy">
        <div class="row q-py-xs">
          <q-card bordered flat class="bg-grey-1 full-width user-card">
            <q-card-section>
              <div class="row text-subtitle1">
                <q-chip
                  square
                  class="text-grey-9"
                  id="takeValue"
                >
                  {{ item.timestamp }}
                </q-chip>
              </div>
              <div class="text-h6 q-my-xs job-font text-grey-9">
                {{ item.taskTitle }}
              </div>
              <div class="text-body2 q-my-xs">{{ item.taskDetails }}</div>

            </q-card-section>
            <q-card-actions>
              <q-space />
              <!-- how to make following button unique -->
              <q-btn
                color="amber-10"
                round
                flat
                icon="chat_bubble_outline"
                @click="expanded = !expanded"
              />
            </q-card-actions>
            <q-slide-transition>
              <div v-show="expanded">
                <q-separator />
                <q-card-section class="text-subitle2">
                  <div v-for="itm in item.shape" :key="itm">
                    <q-card flat class="bg-grey-3 q-ma-md">
                      <q-card-section>
                        {{ itm.cordinates }}
                      </q-card-section>
                    </q-card>
                  </div>
                </q-card-section>
              </div>
            </q-slide-transition>
          </q-card>
        </div>
      </div>
quasar-framework vue.js javascript
1 Answers

As a result of pressing one of the buttons, the others will be pressed too.

This is happening due to the updation of same variable for all the cards.

Instead of @click="expanded = !expanded" you have to assign expanded property in each object of item to make it separate for each card.

userDataRefList = [{
  expanded: false,
  ...
}, {
  expanded: false,
  ...
}, ...]

And in template, it should be @click="item.expanded = !item.expanded"

user_41163000
Related