类星体框架：从Q-table行打开Q-Dialog，打开表中每个行的对话框

Question

首先，对不起，英语不好，我也在改善这一点。 您好，我在将VUEJS与类星体框架一起使用时很新。我想以模态（q-dialog）的一行打开详细信息，我有一个要编辑和删除的按钮，但是用来查看一个寄存器中的详细信息的打开按钮已将其附加到该行中的名称，作为链接。 当我单击它时，它将打开对话框，是的。但它可以为表中的每个寄存器打开它。我在每次点击时都进行了与数据库的连接的日志，并且对表中的每个寄存器都重复。

我的代码。

    <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>

Answer 1

非常简单，请参考此codepen。

https://codepen.io/pratik__007/pen/pen/pen/pen/dydzyey