element iview vue重置表单不起作用？ this.$refs.searchForm.resetFields()； this.$refs[form].resetFields()；

vue重置表单不起作用？this.$refs.searchForm.resetFields();this.$refs[form].resetFields();

出现这种问题，按照下面的5步，挨个检查一遍，基本问题就解决了。如果还是解决不掉，欢迎留言。
本方法同时适用于iview和element Ui

vue页面部分(html)

【1】Form的名字 searchForm
【2】Form-item的 prop=area
【3】Select 的v-model=searchForm.area

js data部分(数据)

【4】searchForm:{area:""}
需要重置成什么样子，这里就写什么值
通过查看以上部分，问题应该是已经解决了

方法部分（方法）

两种方法都可以
【5】

<Button @click="handleReset">重置Button>
handleReset() {
  this.$refs.searchForm.resetFields();
},

// 下面的方式适合一个页面有多个表单需要重置时，只需要定义一个就可以了
<Button @click="handleReset('searchForm')">重置Button>
handleReset(form) {
  this.$refs[form].resetFields();
},

demo代码（iview版）

<template>
<div>
    <Form ref="searchForm" :model="searchForm" inline :label-width="80" class="search-form">
        <Form-item label="地区" prop="area">
            <Select v-model.trim="searchForm.area" placeholder="请选择" clearable filterable style="width:200px">
                <Option v-for="(item, i) in areaList" :key="i" :value="item">{{item}}</Option>
            </Select>
        </Form-item>

        <Form-item style="margin-left:-35px;" class="br">
            <Button @click="handleSearch" type="primary">搜索</Button>
            <Button @click="handleReset">重置</Button>
        </Form-item>
    </Form>
</div>
</template>

<script>
export default {
    data() {
        return {
            searchForm: {
                area: ""
            },
            areaList:[
                "地区一",
                "地区二",
                "地区三",
                "地区四",
            ]
        }
    },
    methods: {
        handleReset() {
            this.$refs.searchForm.resetFields();
        },
    }
}
</script>

其他可能出现的错误

vue.js:634 [Vue warn]: Error in v-on handler: “TypeError: this.$refs.form.resetFields is not a function”
如果遇到上面这个错误，检查一下 ref=“form” 是不是加到了Form上，很可能是加到item上去了

---

如果觉得有用，请点赞收藏让更多的同行少走弯路，祝所有同行朋友，程序没bug！