Vuetify 如何在数据中打开和关闭对话框 table

Question

我们为一家人力资源公司构建了一个应用程序，管理员可以在其中查看 Vuetify 数据中的用户 table。在那个 table 中，我们想要显示用户注释，但它们有时很长并且不适合 table 单元格。我们只想单击一个按钮并在对话框中打开注释。

问题是如果我们有 200 个用户，我们单击按钮打开 "dialogNotes"，每个用户对话框都会打开。我们如何调整我们的代码，以便只打开该用户的对话框？

<template slot="items" slot-scope="props">
                <td>
                <v-checkbox
                  primary
                  hide-details
                  v-model="props.selected"
                ></v-checkbox>
              </td>
                <td>{{props.item.status}}</td>
                <td>
          <img v-if="props.item.photoUrl" :src="props.item.photoUrl" class="user-img">
          <img v-if="!props.item.photoUrl" src="/static/avatar.png" class="user-img">
        </td>
                <td>
                <router-link v-if="props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.name }}</router-link>
        <router-link v-if="!props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.id }}</router-link>
                </td>
                <td>
                <v-btn icon color="primary" small @click.stop="dialogNote = true"><v-icon small>open_in_new</v-icon></v-btn>
                    <v-dialog v-model="dialogNote" scrollable lazy max-width="500" :key="props.item.id">
                    <v-card>
                      <v-card-title>
                        <span>{{ props.item.name }} Note</span>
                      </v-card-title>
                      <v-card-text>
                        {{props.item.note}}
                      </v-card-text>
                      <v-card-actions>
                        <v-btn color="primary" flat @click.stop="dialogNote=false">Close</v-btn>
                      </v-card-actions>
                    </v-card>
                  </v-dialog>
                </td>
                <td>{{props.item.greek}}</td>
                <td>
                <span v-if="props.item.tipsUrl">Yes</span>
              </td>
                <td>{{props.item.waiver}}</td>
                <td>{{props.item.media}}</td>
              <td>{{ props.item.howHear }}</td>
            </template>

数据：

dialogNote: false,

Answer 1

将 dialogNote 变成一个对象并使用 dialogNote[props.item.id] 判断该项目是否打开。

在data中声明它，例如：

dialogNote: {},

并像这样使用它：

 <v-dialog v-model="dialogNote[props.item.id]" scrollable lazy max-width="500" :key="props.item.id">

并更改 open/close 按钮。

打开：

来自
```
@click.stop="dialogNote = true"
```

收件人：

@click.stop="$set(dialogNote, props.item.id, true)"

关闭：

来自
```
@click.stop="dialogNote = false"
```

收件人：

@click.stop="$set(dialogNote, props.item.id, false)"

您的模板：

<template slot="items" slot-scope="props">
<td>
  <v-checkbox primary hide-details v-model="props.selected"></v-checkbox>
</td>
<td>{{props.item.status}}</td>
<td>
  <img v-if="props.item.photoUrl" :src="props.item.photoUrl" class="user-img">
  <img v-if="!props.item.photoUrl" src="/static/avatar.png" class="user-img">
</td>
<td>
  <router-link v-if="props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.name }}</router-link>
  <router-link v-if="!props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.id }}</router-link>
</td>
<td>
  <v-btn icon color="primary" small @click.stop="$set(dialogNote, props.item.id, true)">
    <v-icon small>open_in_new</v-icon>
  </v-btn>
  <v-dialog v-model="dialogNote[props.item.id]" scrollable lazy max-width="500" :key="props.item.id">
    <v-card>
      <v-card-title>
        <span>{{ props.item.name }} Note</span>
      </v-card-title>
      <v-card-text>
        {{props.item.note}}
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" flat @click.stop="$set(dialogNote, props.item.id, false)">Close</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</td>
<td>{{props.item.greek}}</td>
<td>
  <span v-if="props.item.tipsUrl">Yes</span>
</td>
<td>{{props.item.waiver}}</td>
<td>{{props.item.media}}</td>
<td>{{ props.item.howHear }}</td>
</template>

Answer 2

In my opinion it is a better and cleaner way to use vuetify for data-table and dialog.

同样在下面的示例中，当您想要编辑每个用户时，该对话框将为每个用户打开。

Vuetify 提供数据 Table CRUD 操作，您可以编辑、删除和添加新的 item.For 更多 look here

Vuetify 如何在数据中打开和关闭对话框 table

Vuetify How to open and close dialogs within a data table

javascript

dialog

vue.js

vuetify.js