vue数据修改不同步更新的问题解决方案
2024-10-19 19:53:37
最近在做一个组件封装的功能,用到父组件将数组(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是我传入的索引。
最新文章
- c++多重继承
- Distributed2:Linked Server Login 添加和删除
- U盘centos7系统安装http://www.augsky.com/599.html
- 唐巧的iOS技术博客选摘
- Android 查看是否有存储卡插入
- Unable to start EmbeddedWebApplicationContext due to missing EmbeddedServletContainerFactory bean.
- 基于 MySQL 的数据库实践(基本查询)
- vue 使用定时器setInterval
- TestNG Suite 运行出现中文乱码如何解决
- 常用的一些markdown格式
- supervisor管理hive metastore和hive server2进程
- dubbo学习(zz)
- SpringBoot下的Job定时任务
- 什么是分布式锁?Redis实现分布式锁详解
- 【模板】埃拉托色尼筛法 &;&; 欧拉筛法 &;&; 积性函数
- 定制controller转场动画
- 基于Java spring框架的微信企业号开发中关于js-sdk的配置
- 9、django
- Linux系统调用和库函数
- 【Java】集合概述Collection、Map
热门文章
- Arcgis CreateFishnet工具,生成到FileGDB中要素类的格网大小不一致
- Spark应用程序开发流程
- 8. [mmc subsystem] host(第二章)——sdhci
- Tests in error:BlogApplicationTests.initializationError » IllegalState Unable to find a @Spri...【解决】
- Axel多线程工具安装
- v8
- Appium+python自动化(三)- SDK Manager(超详解)
- 批处理教程之cls、pause命令
- C++中二分法之upper_bound()、lower_bound、binary_search()函数
- 日常笔记4关于cin、cin.get()、cin.getline()、getline()使用区别