CODEWITHSUNDEEP
vue.jsquasar-framework
NOE RIVERA LUGO
NOE RIVERA LUGO

Reputation: 1

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>

Upvotes: 0

Views: 3983

Answers (1)

Pratik Patel
Pratik Patel

Reputation: 6978

It's very easy please refer this codepen.

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

Upvotes: 2

Related Questions