在 v-for vue js 中呈现唯一按钮

Question

在我的代码中，我尝试通过 v-for 渲染一系列卡片。每张卡片都有一个按钮 @click="expanded = !expanded"，可以自行展开以显示其余信息。由于按下其中一个按钮，其他按钮也将被按下。我怎样才能防止这种情况发生？

我的代码：

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

Answer 1

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

发生这种情况是因为更新了所有卡片的相同变量。

而不是 @click="expanded = !expanded" 你必须在项目的每个对象中分配 expanded 属性以使其与每张卡片分开。

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

并且在模板中，应该是@click="item.expanded = !item.expanded"

在 v-for vue js 中呈现唯一按钮

render unique button inside v-for vue js

javascript

vue.js

quasar-framework