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">
                  v-for="ral in rals"
                  :style="{ backgroundColor: ral }"
                  class="shadow-8 ral-card text-sha text-center q-pa-md"
                  @click="dialog = true"
                <q-dialog v-model="dialog">
                  <q-card class="column full-height full-width">
                      <div class="text-h6">{{ ral }}</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

        this. dialog = true;

Log in to reply