Q-dialog, access to data in list/loop
-
Hello everyone
I’m trying to get access to the list from a Q-dialog. How do I do that? I want to access the background color and some data. My code looks like this:
<div class="q-mt-lg row"> <div class="row"> <div class="q-gutter-sm"> <q-btn v-for="ral in rals" :key="ral" :style="{ backgroundColor: ral }" class="shadow-8 ral-card text-sha text-center q-pa-md" @click="dialog = true" ></q-btn> <q-dialog v-model="dialog"> <q-card class="column full-height full-width"> <q-card-section> <div class="text-h6">{{ ral }}</div> </q-card-section> </q-card> </q-dialog> </div> </div> </div>
-
Hi @namtn-dev, you can use Vuex for that.
You should create a new component with computed props like background and other data, in the store you could create a new module to handle them.
Theclick
method in the button list should call a method to set the computed props. -
@namtn-dev You need to keep track of the item what was clicked. So instead of
@click="dialog = true"
you should do@click="opendialog(ral)"
and then in your methodsopendialog(listItem){ this. dialog = true; console.log(listItem) }