使用官方 uni-app 演示示例即可重现
以下说明均以官方示例代码表示
代码路径:pages\component\input\input.vue
详细问题描述
[内容]
input 组件,绑定的 value 被使用 String.replace 得到 空字符串,并赋值给 input 绑定的 value 时,input 展示的内容并没有为空,而是保持不变。
社区内有相似 bug 提出,但是是6月份的,至今没有官方回复
https://ask.dcloud.net.cn/question/72787?item_id=96641&rf=false
重现步骤
[步骤]
在上述代码路径中找到 methods replaceInput
该方法原代码
replaceInput: function(event) {
var value = event.target.value;
if (value === '11') {
this.changeValue = '2';
}
},
改为以下代码
replaceInput: function(event) {
var value = event.target.value;
const newValue = value.replace(/\D/g, '');
this.changeValue = newValue;
console.log('newValue:_____', newValue);
},
在 input 中输入 123aa
可发现每次打印的 newValue 都是期望得到的值
1
12
123
123
但是界面上展示的依然是 123aa
若这时候再输入数字3
则会得到期望得到的值 1233,并且打印的值正确
[结果]
[期望]
[如果语言难以表述清晰,拍一个视频或截图,有图有真相]
IDE运行环境说明
[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
HBuilderX
[IDE版本号]
[windows版本号]
win10
[mac版本号]
uni-app运行环境说明
[运行端是h5或app或某个小程序?]
微信小程序,其他未测试
[运行端版本号]
[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
[编译模式是老模板模式还是新的自定义组件模式?]
自定义
App运行环境说明
[Android版本号]
[iOS版本号]
[手机型号]
[模拟器型号]
附件
[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]
[App安装包或H5地址]
[可重现代码片段]
联系方式
[QQ]
2 个回复
DCloud_UNI_GSQ
input、textarea 组件的 input 事件处理函数内实时修改当前值不生效,可以延迟设置,例如:setTimeout(() => { this.value = 100 }, 0)
l***@163.com
uni-app和纯vueJs 还是有区别的 提一句(uni-app对于组件两次封装很不友好 属性事件不能透传 v-on v-bind不支持 当然render方法还没试 不清楚能否拿到input组件对象 或者 直接传 ‘input’是否能使用) 说下题主问题解决方案: 题主的情况应该是 封装了input组件 这时input组件上的value不应该用自定义组件内部的状态 (data里定义的)应该始终使用props传入的 (如果model没设置 那就是value了) 对于值的更新 应该始终向外emit (如果model没设置 那就是input)事件