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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
vue router 动态路由清除方式
May 25 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
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP实现微信发红包程序
2015/08/24 PHP
Laravel 队列使用的实现
2019/01/08 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
七年级音乐教学反思
2014/01/26 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
2014年个人委托书范本
2014/10/13 职场文书
老员工辞职信范文
2015/05/12 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
java版 简单三子棋游戏
2022/05/04 Java/Android