Q-dialog, access to data in list/loop

namtn-dev

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>

mateonunez

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.
The click method in the button list should call a method to set the computed props.

turigeza

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

opendialog(listItem){
    this. dialog = true;
    console.log(listItem)
}