vue.js - 最大调用堆栈大小超过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

我只是有同样的错误。将对话框移出我的循环即可解决此问题。
您必须自己处理打开和关闭对话框:

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

data() {
  return {
    open: false
  }
}