Question

我在使用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]: Error in v-on handler: 'TypeError: Cannot read property 'reset' of undefined'，下次没有错误弹出。似乎第一次找不到“表单参考”；您能帮我了解如何在打开对话框时正确重置表单吗？

为简单起见，我仅使用以下一个组件编写了此CodePen：https://codepen.io/dadax91981/pen/VweqeJX?editors=1010

谢谢。

Answer 1

当您的变量对话框= false时，表单元素不存在。在openDialog中将其设置为true时。直到下一个勾号才创建。因此，在定义this。$ refs.form之前，您应该等待下一个刻度。

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

Answer 2

我自己的问题的另一种解决方案是在关闭对话框时重置表单。

对话框打开时重置Vuetify表单

2 个答案: