iview input组件clearable清空属性无法清空双向绑定值的原因解决

最新推荐文章于 2024-05-29 10:40:22 发布
最新推荐文章于 2024-05-29 10:40:22 发布
阅读量962 收藏
点赞数
文章标签： view design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyz246859/article/details/131450455
版权

最近在使用iview新版本 input组件时，刚开始发现使用v-modal绑定的值，在点击clearable清除input框内容时，再次搜索发现参数还是没有被清掉
在这里插入图片描述
于是仔细查看代码的细节，才发现问题所在：
原来我绑定的参数的中文名称，但是搜索使用的是参数的具体代码值，所有点击清除按钮只是清掉了名称而已，具体的参数值是没有清掉的，所有导致搜索还是一样的，这是我们大家都很容易忽略的错误，希望写出来让大家都避免这个错误

lyz246859
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview 级联选择组件_踩iviewui中Select 选择器两级联动，重置查询条件时第二级数据无法清除的坑...
weixin_39811150的博客
12-22 466
小颖公司最近做的项目用的vue+iviewui+axios，在做项目的过程中，遇到一个问题：二级联动的下拉框，第一个下拉框一直都有值，第二个下拉框是在选择了第一个下拉框之后采取调用ajax获取其值，但当点击重置按钮时，所有的查询条件都要置空，所以这时第二个下拉框的 option 的值也应是空的，但事实是虽然小颖在点击重置按钮时把第二个下拉框的option绑定的值置空了，但它还是能获取到数据，最后定...
基于IView中on-change属性的使用详解
08-27
在上面的代码中，我们使用了IView的Select组件，并将其v-model绑定到f.p上，然后使用@on-change指令来监听Select组件的变化，当Select组件的值变化时，会触发selpro方法。 二、on-change属性的使用坑 在使用IView...
iView Select选择器组件 解决clearable清空选项后绑定的参数被删除
weixin_49098968的博客
04-27 752
解决在Vue项目里使用iView里的Select组件，使用``clearable``清空选项删除参数的问题
element UI （input输入框clearable）不生效问题
最新发布
x03_01的博客
05-29 294
【代码】element UI （input输入框clearable）不生效问题。
element的input框的clearable无法删除接口赋的值，
qq_32973061的博客
02-28 476
先写了 this.form = data; 后面this.form.collegiateDate = data.planStartTime + '~' + data.planEndTime, 给日期段赋值后，input的clearable删除失败，同属form表单的其他值变化时才会显示为空， 因为this.form=data给form赋值了，而这里的data不存在collegiateDate 属性， 对象中的属性, his.form.collegiateDate = data.planStartT
html输入框的值重置为空,【报Bug】input框 v-model双向绑定 清空不了、动态修改值 修改不了...
weixin_39562089的博客
06-04 692
用户名输入框，首字母要求是字母，只能是字母加数字[内容]data() {return {userInfo: {username:''},}},checkUsername(event){if(event.detail.value.length==1){if(/^\+?[1-9][0-9]*$/.test(event.detail.value)){this.userInfo.username = ''...
el-select标签设置了clearable属性，但是不出现清除按钮 以及el-table合计功能滚动条层级问题
Gewenjuan_0309的博客
09-14 2228
最近做项目，公司要求在表格中加入“合计”行。查看element文档后使用自定义方法进行添加。添加后页面中，合计行在横向滚动条下方。这里要的滚动条是整个table的滚动条，所以将表头、表内容、表尾的滚动条设为visible。导致出现这个问题的原因是：此时的滚动条是表内容的滚动条。而合计行是属于表尾。解决办法：value正确使用接口返回的字段值。
【bug】el-input的clear事件无法清空输入框内的值
花椒和蕊的博客
03-13 1994
然后又遇到了一个父子组件的，子组件是表单，在子组件中像这么这样写的话，相当于在子组件里改变值，逆向改变不行，那就去父组件改变。但是遇到了奇怪的现象，没有父子组件的嵌套，log打印值已经变成空的，但是输入框的还在，这个时候想到是不是要用this.可能是因为form里都是空的，找不到这个字段，不知道要清空哪一项。在data中定义的form对象里,如下定义。nexttick(),都试了还是不行。一般这样写，输入框就能清空了。父组件的子组件上接收下。
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
我就废话不多说了，大家还是直接看代码吧~ <input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” />...或者绑定到data里边的一个字符串，也是可以解决
iview的日历组件，iview的日历组件
02-01
在前端开发领域，`iView` 是一个广受欢迎的 Vue.js UI 框架，它提供了许多优雅且易于使用的组件，极大地提升了开发效率。本文将深入探讨 `iView` 的日历组件，帮助开发者理解其核心功能、用法以及如何在实际项目中...
vue iview的菜单组件Mune 点击不高亮的解决方案
10-16
总的来说，解决Vue iView Menu组件点击不高亮的问题，主要是通过合理配置`router-link`的`active-class`和`exact`属性，以及避免与组件默认样式的冲突。通过自定义CSS类和精确匹配，我们可以实现预期的高亮效果，为...
iview日期控件,双向绑定日期格式的方法
01-19
日期在双向绑定之后格式为：2017-07-03T16:00:00.000Z 想要的格式为2017-07-04 调了好久，几乎一天：用一句话搞定了 @on-change=”addForm.Birthday=$event” 选择日期 type=datetime v-model=addForm.Birthday key...
el-date-picker设置初始值后，clearable不可清空问题
Anyuegogogo的博客
11-27 1495
el-date-picker设置初始值后，clearable不可清空问题
解决el-input输入框使用oninput或onkeyup后，v-model双向绑定失效问题
黄孝果的博客
03-22 3843
在输入中文触发oninput后，v-model绑定的值会被设成空字符串，这时候再输入数字，v-model绑定的值不会被赋值，一直为空。解决方法可以用blur手动给绑定的值赋值。 <el-input v-model="form.account" clearable placeholder="请输入手机号" onkeyup="value=value.replace(/[^\d]/g,''.
＜问题记录＞ ElementUI的级联选择器，使用clearable，无法正常清除
weixin_46337886的博客
03-16 3080
使用clearable进行清除后，发现v-model的值还保留在第二级，不能继续在进行查询 上图，在点击清除按钮后，发现还保留在北京市。 我的解决办法是在axios向后台发送数据的时候进行一个判断，如果选择的数组长度等于3那就获取(第三个值)最后的值，否则就为空字符 后端为了查出级联选择器的数据单独创建了个查询方法 以下是DAL层的一部分代码 ...
学习使用js/jquery获取和清空input的value值
徊忆羽菲
11-11 3620
学习使用js/jquery获取和清空input的value值一、获取input的值1、通过普通选择器获取2、通过标签选择器获取二、清空input的value值 一、获取input的值 1、通过普通选择器获取 通过类选择器获取：$('.class').val() 通过id选择器获取：$(" #id").val() 2、通过标签选择器获取 $(" input[ name='name' ] ").val() $(" input[ type='text' ] ").val() $(" input[ type='
uniapp app打包 提交清空数据清空不掉的
weixin_45631278的博客
06-17 1056
uniapp app清空数据清不掉
el-select 的 v-model 绑定了一个对象，通过 clearable 清空后类型发生变化
Alan_Walker688的博客
02-26 1409
v-model 中绑定的值是对象类型，给 el-select 添加 clearable 属性后，当点击 `×` 清空选择器中选中的选项后，经过打印发现 v-model 绑定的值的类型由 object 变为了 string。
iView之清空选择框
weixin_30297281的博客
05-07 672
Form表单布局的vue组件，已经增加了校验选择框，判断为空的情况下不调用接口。 后来发现，选择了选择框后，清空，再点查询，还是会调接口，看日志发现传了原来清空的值过来，实际上没有清空。 这里增加on-clear 事件绑定清空值。 1 <Select :label-in-value="true" @on-change="obtainValue" v-model="formVal...
iview选择器clearable方法后绑定值是undefined
05-27
iview的选择器组件（Select）也有clearable方法，用于清除选择器中的值。当您调用clearable方法时，如果选择器中没有值，则绑定的值将返回undefined。如果您希望在调用clearable方法时始终返回一个值，可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值