最近在做一个组件封装的功能,用到父组件将数组(this.DataSource,this.DefaultItem)传到给子组件,子组件接受该数组来进行添加数组和删除数组的操作。因为子组件无法直接修改父组件传过来的值,联想到vue利用双向绑定的特点,因此我在子组件中定义2个数组,

data () {

   leftData: this.DataSource,

  rightData:this.DefaultItem

},

想达到一个效果就是我修改子组件的leftData 和 rightData 从而 修改到 父组件的this.DataSource和this.DefaultItem

如下部分代码:

this.rightData = this.rightData.concat(this.leftData[this.left]);
this.leftData.splice(this.left, 1);
然后我就发现,rightData的虽然赋值上去了,但是并没有改变到DefaultItem,但是DataSource的值却因为leftData的改变而改变了。
针对这一怪异现象,花了一些时间追溯问题本源,就是数据的修改没有同步,然后对这方面进行一番百度,终于明白了道理。
 
首先vue包含一组观察数组的变异方法,调用这些方法就可以触发视图的更新,或者说数据的修改吧。
push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
其次vue由于javascript的限制,不能够直接检测到给数组赋值,也不能对该数组进行长度的赋值。
 
弄清楚这一道理之后,后面的问题也就好解决了,那就是我可以用push来向rightData添加数据。
this.rightData.push(this.leftData[this.left]);
此时再debugger发现rightData的值的修改同时修改到了DefaultItem。
以上其中this.left是我传入的索引。
 

vue数据修改不同步更新的问题解决方案的更多相关文章

  1. rsync+inotify实现数据的实时同步更新

    rsync可以实现触发式的文件同步,但是通过crontab守护进程方式进行触发,同步的数据和实际数据会有差异,而inotify可以监控文件系统的各种变化,当文件有任何变动时,就触发rsync同步,这样 ...

  2. vue数据更改视图不更新问题----深入响应式原理

    Vue响应式原理之官方解释 当你把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为get ...

  3. EF中数据修改时动态更新其他数据

    场景 利用.net core开发时,经常会遇到使用EF(Entity Framework),但是今天在开发过程中发现一个值莫名其妙的自己变了,我怀疑是EF的问题. 主要代码如下: 1 // 最近一条告 ...

  4. vue数据修改 但未渲染页面

    1. 普通的 `1.1 this.$set('obj',key,value); 1.2 this.splice(); 2.数据层次太多,没有触发render函数进行自动更新,需手动调用: this.$ ...

  5. Dev GridControl数据修改后实时更新数据源

      1:  /// <summary> 2:  /// 嵌入的ComboxEdit控件选择值变化事件 3:  /// </summary> 4: /// <param n ...

  6. Dev GridControl数据修改后实时更新数据源(转)

    1:  /// <summary> 2:  /// 嵌入的ComboxEdit控件选择值变化事件 3:  /// </summary> 4: /// <param nam ...

  7. webstorm vue代码修改后不更新问题

    把 safe write 的勾去掉就行了.

  8. Angular全局数据管理与同步更新

    自定义实现angular中数据的状态管理,如有不妥请指正 一.先介绍一下rxjs中subject: Import {subject}from’rxjs’ Subject 数据的订阅与分发,结合报刊的发 ...

  9. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

随机推荐

  1. flink 批量梯度下降算法线性回归参数求解(Linear Regression with BGD(batch gradient descent) )

    1.线性回归 假设线性函数如下: 假设我们有10个样本x1,y1),(x2,y2).....(x10,y10),求解目标就是根据多个样本求解theta0和theta1的最优值. 什么样的θ最好的呢?最 ...

  2. Ubuntu下部署Portainer管理docker

    在上一篇文章中,我们部署了Shipyard来管理docker集群,总体比较简单,而且Shipyard界面风格很简约,还是比较喜欢的,但是正如提出的node节点无法显示bug,以及该项目早已停止维护,让 ...

  3. 201871010133-赵永军《面向对象程序设计(java)》第八周学习总结

    201871010133-赵永军<面向对象程序设计(java)>第八周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  4. 【我的第一个现实漏洞分析】 CVE-2017-17215 华为智能路由器HG532 漏洞分析笔记

    0x00 基本信息 2017.11.27 Check Point团队报告华为 HG532 产品的远程命令执行漏洞(CVE-2017-17215),Mirai的升级版变种中已经使用该漏洞. 华为HG53 ...

  5. 在 Oracle 中使用正则表达式

    Oracle使用正则表达式离不开这4个函数: 1.regexp_like 2.regexp_substr 3.regexp_instr 4.regexp_replace 看函数名称大概就能猜到有什么用 ...

  6. Linux环境下sudo切换用户后执行其他命令

    https://blog.csdn.net/liangxw1/article/details/80106465

  7. Urllib 库使用

    什么是Urllib Urllib是python内置的HTTP请求库包括以下模块urllib.request 请求模块   -->用来模拟发送请求  类似于输入网址敲击回车的过程urllib.er ...

  8. mysql使用记录

    1. 报错 10061 将mysql启动即可

  9. MACbook安装WIN7后亮度调节的办法

     MACbook安装WIN7后亮度调节的办法:1.按WIN+X打开移动中心,第一个就是亮度调节.或者右击托盘区的电池,选择移动中心也可以.2.右击托盘区域的电池,选择电源管理,在界面中调节亮度. 3. ...

  10. [LeetCode] 763. Partition Labels 分割标签

    A string S of lowercase letters is given. We want to partition this string into as many parts as pos ...