[Vuejs]-Passing props dynamically to a component inside a v-for loop

by

0👍

✅

I will help you as much as I understand. You use the mapDialog variable to open the dialogue. But even if this variable is used in v-for, its reference does not change. For this reason, when you want to open a modal, all modals may be opened and the last one may appear because it is the last one opened. Please check the dom.

I think this method can solve the problem.

in script

const meetings  = [
  {
    did: 'some value',
    address: 'some address',
    name: 'some name',
    // add modal flag
    showMapModal: false
  }
]

template

<div
      v-for="meeting in meetings"
      :key="meeting.did"
      class="col-12 col-md-6 col-lg-3 q-pa-md q-mx-xl"
    >
      <q-card class="my-card homeCard q-pa-md">
        <q-dialog class="mapDialog flex column" v-model="meeting.showMapModal">
          <MeetMapComponent
            :key="componentKey"
            :mapDiv="mapDiv"
            :mapData="meeting.address"
            :buyerName="meeting.name"
          />
        </q-dialog>
        </q-card>
        </div>

Leave a comment