Javascript 打开对话框时重置Vuetify表单

我使用Vuetify框架的Vue页面有问题。 在此页面中，我有一个按钮，用于打开子组件中定义的对话框：

<div id="app">
  <v-app id="inspire">
    <v-row justify="center" class="d-flex align-center">
      
      <my-dialog v-model="dialog"></my-dialog>

      <v-btn color="primary" dark @click="openDialog">Open Dialog</v-btn>
      
    </v-row>
  </v-app>
</div>

打开对话框

当对话框打开时，我想使用Vuetify文档建议的

this.$refs.form.reset（）

函数重置内部表单。 当我第一次尝试打开对话框时，在控制台中出现此错误：

“[Vue warn]：v-on处理程序中出现错误：“TypeError:无法读取未定义的”的属性“reset”

，下次不会弹出错误。 第一次似乎找不到“表单引用”；您能帮助我了解如何在打开对话框时正确重置表单吗

为了简单起见，我只准备了一个组件：

---

谢谢。

当变量dialog=false时，表单元素不存在。在openDialog中将其设置为true时，表单元素将在下一个勾号之前创建。因此，您应该等待下一个勾号，然后再定义此。$refs.form

openDialog() {
  console.log("openDialog");
  this.dialog = true;
  Vue.nextTick(() => this.$refs.form.reset()); // or this.$nextTick(...)
},

---

我自己问题的另一个解决方案是在对话框关闭时重置窗体