element plus + vue3表单第一次数据未清空的bug问题解决

23 min read

在使用 Element Plus 和 Vue 3 表单时，遇到第一次数据未清空的 bug 问题，可以尝试以下解决方法：

  1. 使用 ref 定义表单数据：在 Vue 3 中，可以使用 ref 定义响应式的数据。在表单的 data() 方法中使用 ref 定义表单数据，并在模板中使用 .value 来获取其值。例如：
import { ref } from 'vue';

export default {
  data() {
    return {
      form: {
        username: ref(''),
        password: ref('')
      }
    };
  }
}

然后在模板中使用 form.username.value 来获取表单数据。

  1. 在页面加载完成后，使用 nextTick 清空表单数据：使用 Vue 3 的 nextTick 方法可以在页面加载完成后执行代码。在页面加载完成后，将表单数据清空即可。例如：
import { nextTick } from 'vue';

export default {
  mounted() {
    nextTick(() => {
      this.form.username.value = '';
      this.form.password.value = '';
    });
  }
}
  1. 使用 v-model 绑定表单数据：在 Element Plus 中，可以使用 v-model 来双向绑定表单数据。在使用 v-model 绑定表单数据时，无需手动清空表单数据，Vue 会自动处理。例如：
<el-input v-model="form.username.value"></el-input>
<el-input type="password" v-model="form.password.value"></el-input>

这样，在页面加载完成后，表单数据会自动清空。

通过以上方法，应该能够解决 Element Plus 和 Vue 3 表单第一次数据未清空的 bug 问题。