验证$refs.form.reset和$refs.form.resetValidation的错误

Question

在尝试执行this.$refs.form.reset()或this.$refs.form.resetValidation()时，我会得到以下错误

Vue警告: v-on处理程序中的错误："TypeError:无法读取未定义的属性‘重置’“

我就是这样用的

<v-form
    ref="form"
    v-model="valid"
    lazy-validation
    style="padding: 20px">
    <v-row>
        <v-col>
            <v-text-field
                v-model="form.name"
                :rules="rules.name"
                :counter="10"
                label="Bank Name" required/>
        </v-col>
    </v-row>
</v-form>

并在单击窗体所在的对话框时调用此方法。

createItem() {
    this.cancel();
    this.mode = "New Bank";
    this.dialog = true;
},
cancel() {
    this.dialog = false;
    this.$refs.form.reset()
},

为什么会发生这种情况？

Answer 1

如果调用createItem()，则单击用于打开对话框的按钮。然后，在呈现表单组件之前，可以调用cancel()中的this.$refs.form.reset()。因此，一种选择是在创建项后重置窗体，或者可以使用

this.$nextTick(() => {
    if (this.$refs[form]) {
      this.$refs.form.reset();
    }
});

Answer 2

当您调用"this.dialog =false“时，对话框可能不存在，因此当您调用"this.$refs.form.reset()”时，"this.$refs.form“是未定义的。守则应如下所示：

cancel() {
    this.$refs.form.reset()
    this.dialog = false;
}

Answer 3

在开始对话时这样做。

cancel() {
    this.$refs.form.reset()
    this.dialog =true;

},