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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue实现滑动解锁功能
Mar 03 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
默默小谈PHP&MYSQL分页原理及实现
2007/01/02 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
Python发送email的3种方法
2015/04/28 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Django入门使用示例
2017/12/12 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
超市总经理岗位职责
2014/02/02 职场文书
模范家庭事迹材料
2014/02/10 职场文书
白莲教口号
2014/06/18 职场文书
兽医医药专业求职信
2014/07/27 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书