Vue.js 几次打开对话框后应用最大调用堆栈错误

Question

我的 Vue.js 应用程序有问题。我实现了数据 table，内容来自 API 调用。所以在安装应用程序后，我调用它 API 并用响应填充数组，然后在 table 中显示此数据。我想添加向每一行添加注释的可能性，因此我需要打开对话框并向其中解析 ID，以便能够将注释保存到该特定行。我能够实现这个对话框，目前没有 ID，所以每一行都是相同的，当我点击保存时它只是关闭卡，但我遇到了我想在继续之前解决的问题。

所以问题是当我点击那个按钮打开对话框时，我可以看到背景非常模糊，如下图所示。

当我点击保存并再次打开这个对话框时，或者可能再打开两次，我收到这个错误并且页面没有响应，我需要打开新标签并转到相同的 link.

这是我的历史组件代码，其中包含每个按钮。

<v-data-table
          :headers="headers"
          :items="history"
          :search="search"
          class="elevation-1"
        >
          <template v-slot:item.recording>
            <v-dialog v-model="dialog" max-width="400px">
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  icon
                  small
                  @click="dialog = true"
                  v-bind="attrs"
                  v-on="on"
                >
                  <v-icon small> mdi-content-save</v-icon>
                </v-btn>
              </template>
              <NoteToHistoryDialog :noteId="noteId" v-on:close-card="dialog = false" />
            </v-dialog>
            <v-btn icon small @click="downloadAttachment">
              <v-icon small> mdi-download</v-icon>
            </v-btn>
          </template>
        </v-data-table>

这是 NoteToHistoryDialog 组件代码。

<template>
  <v-main>
    <v-card>
      <v-card-title class="primary white--text">{{  $t("Add Note") }}{{ noteId }}</v-card-title>
          <v-form>
            <v-text-field
                color="primary"
                label="Text"
                class="pr-4 pl-4"
                v-model="note"
            >
            </v-text-field>
          </v-form>
      <v-card-actions class="justify-end">
        <v-btn depressed plain color="primary white--text" @click="$emit('close-card')">
          {{ $t("Close") }}
          <v-icon>mdi-close</v-icon>
        </v-btn>
        <v-btn depressed plain color="primary white--text" @click="addNote">
          {{  $t("Save") }}
          <v-icon>mdi-content-save</v-icon>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-main>
</template>

但这应该没问题。

这也是整个组件的图片。单击那个小磁盘后会触发对话框。

感谢任何想法。

Answer 1

我能够解决我的问题，我创建了新组件，从 Vuetify 文档复制并粘贴了整个 CRUD table 并逐行编辑了我个人需要的所有内容，现在我可以单击“添加注释” " 按钮多次，它会正常工作。

这是工作代码。

        <v-data-table
          :headers="headers"
          :items="history"
          sort-by="date"
          class="elevation-1"
        >
          <template v-slot:top>
            <v-dialog v-model="dialog" max-width="500px">
              <v-card>
                <v-card-title class="primary white--text">
                  <span class="text-h5">{{ $t("Add Note") }}</span>
                </v-card-title>

                <v-card-text>
                  <v-container>
                    <v-row>
                      <v-col cols="12" sm="12" md="12">
                        <v-form>
                          <v-textarea
                            color="primary"
                            label="Text poznámky"
                            v-model="editedItem.note"
                            auto-grow
                            clearable
                            >
                          </v-textarea>
                        </v-form>
                      </v-col>
                    </v-row>
                  </v-container>
                </v-card-text>

                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="primary" text @click="close">
                    Zrušiť
                  </v-btn>
                  <v-btn color="secondary" text @click="save">
                    Uložiť
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
            <v-dialog v-model="dialogDelete" max-width="500px">
              <v-card>
                <v-card-title class="text-h5"
                  >Chcete stiahnuť nahrávku?</v-card-title
                >
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="primary" text @click="closeDelete"
                    >Zrušiť</v-btn
                  >
                  <v-btn color="secondary" text @click="deleteItemConfirm"
                    >OK</v-btn
                  >
                  <v-spacer></v-spacer>
                </v-card-actions>
              </v-card>
            </v-dialog>
          </template>
          <template v-slot:item.recording="{ item }">
            <v-icon small class="mr-2" @click="addNote(item)">
              mdi-content-save
            </v-icon>
            <v-icon small @click="downloadRecording(item)">
              mdi-download
            </v-icon>
          </template>
        </v-data-table>

Vue.js 几次打开对话框后应用最大调用堆栈错误

Vue.js app Maximum Call stack error after opening dialog few times

javascript

dialog

vue.js

vuetify.js