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 $router和$route的区别详解
Dec 02 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue postcss-px2rem 自适应布局
May 15 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
Syphon 使用方法
2021/03/03 冲泡冲煮
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
什么叫做SQL注入,如何防止
2016/10/04 面试题
商场总经理岗位职责
2014/02/03 职场文书
部队党性分析材料
2014/02/16 职场文书
幼教求职信
2014/03/12 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL