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.
    The click 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 methods

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

Log in to reply