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

vue重置表单不起作用?this.r e f s . s e a r c h F o r m . r e s e t F i e l d s ( ) ; t h i s . refs.searchForm.resetFields();this.refs.searchForm.resetFields();this.refs[form].resetFields();
文章目录
vue重置表单不起作用?this.r e f s . s e a r c h F o r m . r e s e t F i e l d s ( ) ; t h i s . refs.searchForm.resetFields();this.refs.searchForm.resetFields();this.refs[form].resetFields();
vue页面部分(html)
js data部分(数据)
方法部分(方法)
demo代码(iview版)
其他可能出现的错误

出现这种问题,按照下面的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上去了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值