'Quasar framework: Opening a q-dialog from a q-table row, opens the dialog for every row in table

first of all, sorry for bad english, I'm improving that too. Hello, i'm quite new in using vuejs with quasar framework. I want to open the details from a row in a modal (q-dialog), I have a button to edit and delete, but the open button used to see the details from one register is attached to the name in the row as a link. when I click on it, it opens the dialog, yay. but it opens it for every register in the table. I made logs for the connection to database on each click and it repeats for every register in table.

my code.

    <q-table
      table-header-class="bg-grey-3 text-grey-9 "
      :rows="rows"
      :columns="columns"
      :row-key="columns[0].name"
      :separator="separator"
      :filter="search"
    >
      <template v-slot:body-cell-usuario="props">
        <q-td :props="props">
          <div>
            <q-btn @click="modalDetalle = true"> {{ props.row.usuario }}</q-btn>
          </div>
          <q-dialog v-model="modalDetalle">
            <component :is="verDetalle" :id="props.key" @reload="getStatus" />
          </q-dialog>
        </q-td>
      </template>
vue.jsquasar-framework


Solution 1:[1]

It's very easy please refer this codepen.

https://codepen.io/Pratik__007/pen/dydZyEY

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Patel Pratik

Related Questions