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>