Vuetify 超出最大调用堆栈大小

Question

我正在使用 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

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

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>