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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python如何获取服务器硬件信息
2017/05/11 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python主线程捕获子线程的方法
2018/06/17 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
Python使用进程Process模块管理资源
2020/03/05 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
视图的作用
2014/12/19 面试题
电子商务优秀毕业生求职信
2014/07/11 职场文书
少先队活动总结
2014/08/29 职场文书
公司委托书格式范文
2014/10/09 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书