vue中element表单清除不了的bug

正常问题:

       在el-form标签外的的元素使用resetField()方法未能清除表单数据,可使用下面的方法:

this.$nextTick(() => {
   this.$refs.menuForm.resetFields();
});
介绍bug背景

       在一个页面新增、编辑使用同一个dialog框,点击编辑按钮编辑的时候dialog框内的表单自动赋值table中某行数据。

handleClick(row) {
    this.dialogVisible = true;
    this.form.username = row.username
    this.form.password = row.password
}

       在新增的按钮加上上面带dom加载完清除表单的方法。

addinfo() {
    this.dialogVisible = true;
    this.$nextTick(() => {
      this.$refs.form.resetFields();
    });
}

       但是发现未能清除掉数据,后发现在编辑赋值的时候也需要调用nextTick()方法赋值,不然表单仿佛会认定赋值的数据是初始数据;

handleClick(row) {
    this.dialogVisible = true;
    this.$nextTick(() => {
      this.form.username = row.username
      this.form.password = row.password
    })
}

你可能感兴趣的:(vue中element表单清除不了的bug)