En mi código, traté de renderizar series de tarjetas por v-for. cada tarjeta tiene un botón @click="expanded = !expanded" que hace que se expanda para mostrar el resto de información. Como resultado de presionar uno de los botones, los otros también serán presionados. ¿Cómo puedo evitar que esto suceda?
mi código:
<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>Como resultado de presionar uno de los botones, los otros también serán presionados.
Esto sucede debido a la actualización de la misma variable para todas las tarjetas.
En lugar de @click="expanded = !expanded" , debe asignar una propiedad expanded en cada objeto del elemento para que sea independiente para cada tarjeta.
userDataRefList = [{ expanded: false, ... }, { expanded: false, ... }, ...] Y en la plantilla, debería ser @click="item.expanded = !item.expanded"