解决vue中对象属性改变视图不更新的问题
2024-09-03 03:20:55
在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新。
这个情况一般分为两种,
一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会实时更新
第二种情况是改变了对象的某一项,但是其他依赖这个数据的视图没更新
第一种情况是因为直接通过索引去改变数组,vue 对象监听不到他的变化 所以没有更新。
----解决方法 1. Vue.set(example1.items[0], { childMsg: 'Changed!'})
2.使用Vue的变异方法 pop() push() shift() unshift() revese() sort() splice() 也会触发视图更新
第二种情况是修改对象的属性,比如父组件和子组件公用一份数据,数据通过props传到子组件,在子组件中修改数据父组件中不会响应。
方案一:利用Vue.set(object,key,val)
例:Vue.set(vm.obj,'k1','v1')
方案二:利用this.$set(this.obj,key,val)
例:this.$set(this.obj,'k1','v1')
方案三:利用Object.assign({},this.obj)创建新对象
方案四:可以先删除掉该项,然后再使用set 去添加
最新文章
- 说说DOM的那些事儿
- log4jWARN Please initialize the log4j system properly解决办法
- javascript 设计模式-----工厂模式
- MongoDB 副本集管理(不定时更新)
- JSON学习总结
- django post分号引发的问题
- avoid null value in field
- bzoj2285
- SQL Server 2008性能故障排查(四)——TempDB
- hdu4705 Y 简单树形DP 2013多校训练第十场 J题
- 如何查看安装的sql server是什么版本
- Redis API的原子性分析
- C# 乐观锁、悲观锁、共享锁、排它锁、互斥锁
- Win7 VS2015环境使用qt-msvc2015-5.6.0
- 还不好好读书吗?清华3D录取通知书出炉,还能动!
- 客户端调用wcf服务,如何提高调用性能
- kubernetes基础知识:限制POD和容器运行的CPU、内存
- iptables应用
- android学习一---搭建开发环境
- 一个RecycleView的强大adapter
热门文章
- C++ IO流_数据的旅行之路
- OpenJudge 1.5.28 分离整数的各个数位
- 这12款idea插件,能让你代码飞起来
- Windows如何创存储虚拟机并制作存储虚拟化LUN的映射
- KingbaseES insert all/first 功能介绍
- 小结event.target与this
- K8S Service_Ingress
- Unity2D-Dash &;&; SpeedUp
- CMake | 将路径添加到 CMAKE_PREFIX_PATH
- VMware Component Manager服务无法启动