Vue组件更新数据v-model不生效的解决


Posted in Vue.js onApril 02, 2022

组件更新数据v-model不生效

问题描述

在使用Vue双向绑定(v-model)功能时,封装子组件通过Inject功能使用了父组件中的 model 中的属性进行双向绑定,此时在程序中去更新model的某个属性的值,发现子组件没有实时渲染。

原因分析

由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

详见:检测变化注意事项

## 解决方案 对于这种对象变化,我们有三种方法去解决:

方法一

使用Vue.set(object,key,value)

Vue.set(vm.obj,"sex","man")

方法二

使用this.$set(this.object,key,value)

this.$set(this.obj,"sex","man")

方法三

使用**Object.assign({},this.obj)**重新赋值

this.obj.sex = "man";
this.obj = Object.assign({},this.obj)

总结:前两种方式都是应用了Vue内置的set方法去触发对象数据的检测,第三种方式使用的Vue的特性,对跟节点下的数据变更的自动检测。
 

关于v-model失效的问题

在父子组件中,例如iview的table组件中的slot,该函数相对比于table所在附件为父子组件,父子组件的v-model不会是双向绑定,只是单向传值,这是vue的机制问题,原因是不想让子组件污染父组件的数据环境,所以使用的单向传输,经过测试,使用on-change,on-blur等,均存在不同的问题,input如果使用on-change,修改数据源会导致输一个字符,然后更新到v-model绑定的数据源上,然后由于数据源的更新,就会导致该组件的再次渲染,input将会失去焦点,使用v-blur则会导致点击其他按钮时,第一次点击,失去input的焦点,执行绑定的方法,第二次点击才会生效。

解决办法

特别的土,声明一个新的数据源,然后使用on-change改变新的数据源,然后再特定的情况下,比如提交等时机,将新的数据源赋给老的数据源,这样就不会引起问题。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
详解vue 组件注册
Nov 20 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 #Vue.js
Vue+Flask实现图片传输功能
Apr 01 #Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 #Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 #Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 #Vue.js
vue ref如何获取子组件属性值
Mar 31 #Vue.js
vue如何使用模拟的json数据查看效果
You might like
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php数组键值用法实例分析
2015/02/27 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python中requests和https使用简单示例
2018/01/18 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
Python常用外部指令执行代码实例
2020/11/05 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
《跨越百年的美丽》教学反思
2014/02/11 职场文书
上班迟到检讨书
2014/09/15 职场文书
前台文员岗位职责
2015/02/04 职场文书
入党后的感想
2015/08/10 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
Redis命令处理过程源码解析
2022/02/12 Redis