uni-app中v-model绑定后使用@input或者@blur后无法反显

最新推荐文章于 2025-03-25 11:30:45 发布
最新推荐文章于 2025-03-25 11:30:45 发布
阅读量1.1k 收藏
点赞数 1
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/frewtyh/article/details/128959477
版权
在尝试建立评分区间并设定验证规则时，遇到v-model偶尔失效的问题。无论是在blur事件还是input事件中绑定v-model，问题依然存在。通过在线搜索，解决方案是使用this.$forceUpdate()来强制组件更新，从而确保数据的正确回显。

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

1.本意是想做一个评分区间，然后设置效验规则，结果发现v-model有时候会失效

 2.用v-model绑定试过blur和input都会存在这个问题

 

 3.后面再网上查看后发现强制刷新需要加个this.$forceUpdate()这样就能够正常回显了

 

frewtyh
关注
uniapp对象赋值回显失败，uniapp替换对象里面的值页面没有刷新，uni-app赋值对象后页面没有同步更新
weixin_43992507的博客
03-17 2296
uniapp对象赋值回显失败，uniapp替换对象里面的值页面没有刷新，uni-app赋值对象后页面没有同步更新
[随笔] uni-app @input监听输入 @blur触发失去焦点事件 额外传参
热门推荐
zhaoweihao的博客
05-14 1万+
page <input type="digit" placeholder="请输入金额" @input="inputAmount($event,index,item,'S')" @blur="Listeningfocus('S',index)" v-model="item.sutotal" /> js //输入金额 inputAmount(e,index,item,type){ var that = this if(type == 'S') { this..
uniapp中循环使用u-input双向绑定不回显
fairyfree的博客
02-16 954
uniapp中循环使用u-input双向绑定不回显
uniapp中搜索栏中input的@blur和搜索按钮的@click事件存在都执行的问题
最新发布
weixin_40670909的博客
03-25 468
将click事件换成mousedown事件，这样事件的执行顺序就变成mousedown > mouseup > click。总结：小程序开发，我们测试时一定要注意在手机上测试，不要觉得电脑测试下成功了就提交了，很容易造成意想不到的问题。blur事件：当元素失去焦点时触发blur事件；blur和focus事件不会冒泡，其他表单事件都可以。click事件：当点击元素时触发click事件；而这种异步回调触发的先后 在pc端和小程序端出现了明显的差别。在JavaScript中 事件的触发算的上是一种异步回调。
uniapp 中使用 v-model 不生效解决方案
weixin_53431104的博客
01-03 2325
在微信开发者工具中先点击编译再点击预览进行扫码调试，而不是选择真机调试。或者将真机调试版本修改为2.0，而不是使用1.0。
解决vue中v-model双向绑定失败，表单数据不能回显的问题
weixin_43843824的博客
12-19 1万+
解决vue中v-model双向绑定失败，表单数据不能回显的问题 在vue中使用v-model="columns[i].value"或v-model="column[value]"进行双向绑定时或者在绑定事件中使用赋值形式改变绑定变量的值如： handleChange(value){ switch (value){ case 1:this.Model.value=600;this.Model.Precision=0;break; case 2:this.Model.va
uni-app自定义v-model失效问题
halo1416的博客
05-19 3187
但在实际开发中，我们可能更多的基于这一个逻辑去实现自定义的model。中定义model的时候用value和input，不能自定义更改。文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！小程序中这样自定义是不会生效的。
解决Vue中表单输入框v-model双向绑定后数据不显示的问题
jattxgt的博客
11-22 4800
解决Vue中表单输入框v-model双向绑定后数据不显示的问题
【bug】uniapp 小程序 input输入框不显示
lingjx1617的博客
10-14 5704
报错信息：Do not nest other components in the text component, as there may be display differences on different platforms.原因：text中不能嵌套组件，input放置在text中导致小程序中不能正常显示（网页端调试正常）
ElementUI中el-radio-group使用v-model绑定是属性为String字符串类型时不回显数据
BADAO_LIUMANG_QIZHI的博客
08-13 7747
场景 结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。 官方示例代码： <template> <el-radio-group v-model="radio"> <el-radio :label="3">备选项</el-...
uni-app使用input框 v-model双向绑定不起作用解决方案
weixin_37654372的博客
07-12 2381
uni-app使用input框 v-model双向绑定不起作用解决方案
uniapp中的editor富文本输入内容，回显内容
weixin_45274523的博客
09-10 4493
uniapp中editor富文本输入内容前提先设置@blur编辑器失去焦点时触发 使得失去焦点时获取内容存在当前this.centent中，保存时候就可以调用this.centent实现输入内容获取 后端回显数据的时候，首先在显示列表页面获取对应的数据，我是这样写的，点击对应的id获取对应的值把值传过编译器页面： 首先从显示列表页面获取对应数据 从显示列表页面获取到的数据对应参数传过编辑器页面，在编辑器页面接收存在当前页面数据 把刚刚存在的数据放在初始化内容中，这样就...
为啥在uniapp中我们会使用@input，而不是使用v-model去实现双向绑定
第⑦个前端
08-04 4675
大家都知道uniapp是一种跨平台的框架，一套代码能够发布到多个平台，包括小程序和app等。 当我们在uniapp中书写input框时，如果使用v-model来绑定data，在小程序端会出现data无法清理的问题，这个时候我们就要用到uniapp中的@input去实现数据的绑定。 ...
【uniapp】uniapp中我们会使用@input，而不是使用v-model去实现双向绑定【为兼容app多个框架】
weixin_43343144的博客
11-02 746
为啥在uniapp中我们会使用@input，而不是使用v-model去实现双向绑定_第⑦个前端的博客-优快云博客
antd-vue对表单进行编辑，上传的文件没有回显解决方法
木木木不哭的博客
03-30 1432
antd-vue对表单进行编辑，文件没有回显解决方法
uniapp 修改数据后页面无法实时显示出来修改过的数据
xiequanshuai的博客
09-13 886
希望这个办法可以帮到大家。
uni-app通过方法设置组件 uni-easyinput 获取焦点
10-18
在uni-app中，如果你想让uni-easy-input组件连续自动获取焦点并输入数据，你可以按照以下步骤操作： 1. 首先，确保你在HTML模板上正确地使用uni-easy-input组件，并给它添加`ref`属性以便后续操作。例如： ```html <uni-easy-input ref="easyInput" :focus="true"></uni-easy-input> ``` 2. 在Vue的data部分定义变量用于存储输入的数据，如`formData`： ```javascript data() { return { formData: { supplierBatch: '' } }; }, ``` 3. 当需要触发输入聚焦时，调用组件的`focus()`方法： ```javascript focusInput() { this.$refs_easyInput.focus(); // 调用ref对应的组件方法获取焦点 }, ``` 并可以在需要的地方调用此方法，比如在一个事件处理器里： ```javascript @click="focusInput()" // 或者其他触发条件 ``` 4. 如果你想避免输入时的闪烁问题，按照引用[2]的建议，不使用双向绑定(v-model)，而是使用`value`属性和`@blur`事件来监听失去焦点： ```javascript methods: { onBlur() { this.formData.supplierBatch = this.$refs.easyinput.value; // 更新数据 } }, ``` 然后在`uni-easy-input`上添加`@blur`事件： ```html <uni-easy-input v-model="formData.supplierBatch" @blur="onBlur"></uni-easy-input> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值