No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Q-dialog, access to data in list/loop

    Help
    3
    3
    316
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • N
      namtn-dev last edited by

      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>
      1 Reply Last reply Reply Quote 0
      • M
        mateonunez last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • T
          turigeza last edited by 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)
          }
          
          1 Reply Last reply Reply Quote 0
          • First post
            Last post