Vue中this.$refs[name].resetFields();的使用

在项目中遇到使用ref重置不好使,查找资料排查问题,

问题所在:

1.- 经典问题: $refs的须在this.$nextTick()中调用生效

      this.$nextTick(() => {
        this.$refs['name'].resetFields();
      });

2.- ref与model问题:ref不需要非得和model一样,

:v-model获取的是对象，只跟值有关，而ref获取到的是为了操作Dom对象，可以使用$refs来操作

<el-form ref="formRef" :model="form">
</el-form>

3.- Form的FormItem中必须要有prop属性

prop 是在 FormItem 中

<el-form ref="formRef" :model="form">
     <el-form-item label="用户名：" prop="name">
       <el-input v-model="form.name"></el-input>
     </el-form-item>
     <el-form-item label="密码：" prop="password">
       <el-input v-model="form.password"></el-input>
     </el-form-item>
</el-form>

4.- 最终完整代码调试

<template>
  <el-form ref="formRef" :model="form">
       <el-form-item label="用户名：" prop="name">
         <el-input v-model="form.name"></el-input>
       </el-form-item>
       <el-form-item label="密码：" prop="password">
         <el-input v-model="form.password"></el-input>
       </el-form-item>
  </el-form>
  <el-button @click="resetFields">重 置</el-button>
<template>

<script>
data(){
   return {
     form: {
       name: '',
       code: '',
     }
   }
}
methods: {
   resetFields(){
       this.$nextTick(() => {
           this.$refs['name'].resetFields();
       });
   }
}
</script>