Question

Vuetify 超出了最大调用堆栈大小

2020-04-26

13669

vue.js vuetify.js

我正在使用 Vuetify 对话框，这是我的代码

<v-dialog  max-width="390" persistent  v-model="dialog">
  <template v-slot:activator="{ on }">
    <v-btn icon v-if="el.items_count == 0" v-on="on" >
        <v-icon>
          mdi-plus
        </v-icon>
      </v-btn>
  </template>
  <v-card flat>
    <v-card-title>
      this is Son for {{el.title}}
    </v-card-title>
    <v-text-field class="d-block pa-2" v-model="name" outlined label="Name"></v-text-field>
    <v-card-actions>

      <v-btn @click="add" class="d-block">
        <span>Add</span>
      </v-btn>
      <v-btn @click="dialog=false" class="d-block">
        <span>Close</span>
      </v-btn>
    </v-card-actions>
  </v-card>
    </v-dialog>

并且此对话框内部循环并在单击按钮后出现此错误

Uncaught RangeError: Maximum call stack size exceeded.
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)
at VueComponent.onFocusin (VDialog.ts?d213:238)

有人可以帮助我解决该错误吗

Answer 1

在 v-dialog 上设置 :retain-focus="false" 也有帮助。

RomkaLTU

2020-10-20

Answer 2

我刚刚遇到了同样的错误。将对话框移出循环即可解决问题。您必须自己处理对话框的打开和关闭：

<v-dialog v-model="open"> ... </v-dialog>
<... v-for="thing in things">
    <v-btn @click="open = true"> ... </v-btn>
</...>

data() {
  return {
    open: false
  }
}

Answer 3

这也会对你有帮助

<v-dialog v-model="dialog" max-width="900px" persistent :retain-focus="false">
 ...
</v-dialog>

Mark Altiche

2020-12-23