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

Vuetify How to open and close dialogs within a data table

提问by Greg Fielding

We've build an application for a staffing company where Admin can view Users in a Vuetify data table. In that table, we want to show User Notes, but they are sometimes long and don't fit well into a table cell. We would like to simply click a button and open the Notes in a dialog.

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

The problem is that if we have 200 users, and we click the button to open "dialogNotes", every user dialog opens. How can we adjust our code so that only the dialog for that user opens?

问题是，如果我们有 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>

data:

数据：

dialogNote: false,

采纳答案by acdcjunior

Turn dialogNoteinto an object and use the dialogNote[props.item.id]to tell if that item is open or not.

转dialogNote成一个对象，并使用dialogNote[props.item.id]告诉如果该项目是开放与否。

Declare it, in data, like:

在 中声明它data，例如：

dialogNote: {},

And use it like:

并像这样使用它：

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

And change the open/close buttons.

并更改打开/关闭按钮。

• Open:

  • From

    @click.stop="dialogNote = true"
    

  • To:

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

• Close:

  • From

    @click.stop="dialogNote = false"
    

  • To:

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

• 打开：

  • 从

    @click.stop="dialogNote = true"
    

  • 到：

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

• 关闭：

  • 从

    @click.stop="dialogNote = false"
    

  • 到：

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

---

---

Your template:

您的模板：

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

回答by roli roli

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

在我看来，将 vuetify 用于数据表和对话框是一种更好、更简洁的方法。

Also in the examples below the dialog will open for each user when you want to edit them.

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

Vuetify offers Data Table CRUD Actionsand you can edit,delete and add new item.For more look here

Vuetify 提供数据表CRUD 操作，您可以编辑、删除和添加新项目。更多信息请看这里