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

在应用Vue进行项目开发过程中，应用this.$refs[name].resetFields();实现表单搜索元素重置时发现失效。经检查发现是form-item绑定的属性prop与包裹元素el-input绑定值不一致造成的。现梳理有关应用this.$refs[name].resetFields();重置表单方法的注意事项。

• Form必须要有ref属性
• Form必须绑定：model

<Form ref="submitUser" :model="submitUser">
</FormItem>

• Form的FormItem中必须要有prop属性

<FormItem prop="realName">
</FormItem>

• Form包裹的元素绑定值需与FormItem中prop属性名称保持一致（可类比Form表单校验规则）

<Form ref="submitUser" :model="submitUser">
    <FormItem prop="uname">
        <Input type="text" v-model="submitUser.uname" placeholder="用户名"></Input>
    </FormItem>
    <FormItem prop="passwd">
        <Input type="text" v-model="submitUser.passwd" placeholder="密码"></Input>
    </FormItem>
    <FormItem>
        <Button type="info" @click="query">Login</Button>
        <Button @click="handleReset('submitUser')" style="margin-left: 8px;" type="info">Reset</Button>
    </FormItem>
</Form>
<script>
    export default {
        data () {
            return {
                submitUser:{
                    realName:'',
                    identityNumber:'',
                    mobileNumber:'',
                    telePhoneNumber:''
                }
            }
        },
        methods:{
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>