解决vue双向绑定带来的问题
问题场景:
查询完表格数据后 通过作用域插槽,将该行数据传到修改页面(定义了个新对象存储数据),但是由于数据双向绑定,修改这个新对象的值,会影响到最初查询表格获取的值
如下
this.editForm = row
解决方案:
方法1:通过json之间的解析,深拷贝创建一个与row无绑定关联的临时对象,再赋值给editForm
this.editForm = JSON.parse(JSON.stringify(row))
方法2:使用…展开运算符
this.editForm = {...this.editForm,...row}
方法3:$set也不会影响原数据,但只能操作单个数据,在上述场景可能不太适用(属性多久麻烦了)
this.$set(this.editForm,'roleName',row.roleName)
this.$set(this.editForm,'roleDesc',row.roleDesc)
这样就不会影响到最初的row啦!
参考:https://blog.csdn.net/qq_40908105/article/details/121692798
解决vue双向绑定带来的问题相关推荐
- vue 双向绑定,列表、条件渲染,解决强制刷新闪烁问题
vue 双向绑定 v-model 列表渲染 v-for 条件渲染 v-if v-show 解决强制刷新闪烁问题 v-clock 双向绑定 v-model v-model 是 vue 中进行数据双向绑定 ...
- 梳理vue双向绑定的实现原理
Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...
- vue双向绑定原理源码解析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...
- 前端技巧|vue双向绑定原理,助你面试成功
在面试一些大厂的时候,面试官可能会问到你vue双向数据绑定的原理是什么?有些小伙伴不知道是什么东西,这样你在面试官的眼里就大打折扣了.今天小千就来给大家介绍一下vue的双向绑定原理,千万不要错过啦. ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.MVC模式 二.MVVM模式 三.双向绑定原理 1.实现一个Observer 2.实现一个Watcher 3.实现一个Compile 4.实现一个MVVM 四.最后写一个 ...
- 【vue双向绑定原理浅析】
vue双向绑定原理浅析 1.什么是双向绑定? 所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据.(数据变化更新视图,视图变 ...
- vue双向绑定有时候不生效处理办法
vue双向绑定有时候不生效处理办法 问题:当我们给响应式的对象新增属性时,新增的属性并不会显示到页面中:对于响应式的数组,增加元素.修改数组长度时,数组的这些变化也不会反映到页面中 <templ ...
- Vue双向绑定:原理篇(详细)
文章目录 前言 什么是响应式 数据劫持 发布者-订阅者模式 模式简介 发布者 Observer 订阅器 dep 订阅者 Watcher 整体流程 初始化data data变为响应式数据 解析模板 收集 ...
- 记一次对vue双向绑定的理解
之前有看过一次vue双向绑定原理实现相关的博客,看得似懂非懂的,然后也就搁浅了. 昨天脑海里又突然燃起了要不这块搞懂的冲动,于是乎又开始了一轮博客轰炸,综合研究了多位大神写得关于vue双向绑定的实现原 ...
最新文章
- 基于QTcpSocket和QTcpServer的Tcp通讯以及QDataStream序列化数据
- java8 stream 做累加_Java8新特性之Stream(上)|乐字节
- matlab的开方算法_正确的「记事本」打开方式:能渲染3D图像,还能玩贪吃蛇
- 开启DELL Raid卡H730P缓存
- 博主新书:《大数据日知录:架构与算法》目录
- 微软宣布 Visual Studio 2019 将于4月2日正式发布
- java iterator 嵌套_Java中的集合嵌套
- 【Flink】flink on yarn 并行度设置高导致任务失败
- 解决子元素浮动,父元素没有撑开的问题
- Java实现简单的计算器(原创)
- clion eap 预览版 免费版
- AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示
- k8s数据持久化实验
- Flutter PageView简析
- 拓端tecdat|R语言用关联规则和聚类模型挖掘处方数据探索药物配伍中的规律
- 【MFC】Ribbon界面开发(三)
- 计算机对环境保护的应用,计算机技术在环境保护中的应用
- 【matlab】clc,close,close all,clear,clear all作用
- 应用数据安全,任重而道远
- YOLOv5桌面应用开发,手把手教学实操(上)——附源代码