【bug】el-input的clear事件无法清空输入框内的值

最新推荐文章于 2024-06-18 15:35:37 发布

春晓_春眠花落

最新推荐文章于 2024-06-18 15:35:37 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： bug收录文章标签： bug bash 开发语言

本文链接：https://blog.csdn.net/weixin_49668076/article/details/129496450

bug收录专栏收录该内容

35 篇文章

订阅专栏

在Vue应用中，遇到清空el-input输入框值的问题，尽管log显示值已为空，但输入框内容未更新。尝试使用this.set或this.nextTick无效。解决方案是确保form对象中有初始值，对于父子组件间通信，则需在父组件中处理清空事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般这样写，输入框就能清空了

              <el-input v-model="form.custCodeEnd"  clearable @clear="clear('custCodeEnd')" />
                   clear(key) {
                       this.queryParams[key] = ''
                    },

但是遇到了奇怪的现象，没有父子组件的嵌套，log打印值已经变成空的，但是输入框的还在，这个时候想到是不是要用this. $se t 刷新下数据，或者 t hi s .$ nexttick(),都试了还是不行

解决方法：
在data中定义的form对象里,如下定义

form:{
custCodeEnd:''
}

可能是因为form里都是空的，找不到这个字段，不知道要清空哪一项

然后又遇到了一个父子组件的，子组件是表单，在子组件中像这么这样写的话，相当于在子组件里改变值，逆向改变不行，那就去父组件改变

<el-input v-model="form.custCodeEnd"  clearable @clear="clear('custCodeEnd')" />
 clear(key) {
      this.$set('clear', key)
   
    },

父组件的子组件上接收下

            <QueryForm          
              @clear="clear"
            ></QueryForm>

             clear(key) {
             this.form[key] = ''
                 },