解决vue中对象属性改变视图不更新的问题
在使用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 去添加
解决vue中对象属性改变视图不更新的问题的更多相关文章
- vue中对象属性改变视图不更新问题
常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? let vm = new Vue{ el: '#app', da ...
- vue修改对象属性值视图上没有更新
data(){ return { obj:{ name:' ' } } } 方法一: this.$set(this.obj, 'name', '新的值'); 方法二; Vue.set(vm.obj, ...
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- 浅谈Vue中计算属性(computed)和方法(methods)的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
- 【翻译】使用Vuex解决Vue中的身份验证
翻译原文链接:https://scotch.io/tutorials/handling-authentication-in-vue-using-vuex 我的翻译小站:https://www.zcfy ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- 解决Vue中文本输入框v-model双向绑定后数据不显示的问题
前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...
随机推荐
- [CF1500E] Subset Trick (平衡树)
题面 洛谷翻译 V a n y a \rm Vanya Vanya 有一个初始大小为 n n n 的集合 S S S 和 q q q 次往集合加数/删数的操作.(集合中每个数字不同) 称一个数 x x ...
- 状态 :睡眠中,进程ID:13431,yum提示Another app is currently holding the yum lock; waiting for it to exit...
问题描述: 今天想在虚拟机上重新安装docker然后使用到yum命令报错: 解决办法: [root@localhost ~]# rm -f /var/run/yum.pid 然后重新运行刚才的yum命 ...
- atcoder beginner contest 251(D-E)
Tasks - Panasonic Programming Contest 2022(AtCoder Beginner Contest 251)\ D - At Most 3 (Contestant ...
- 第五十八篇:webpack的Source Map
好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中 ...
- Paperask一键获取A币
又到了毕业季,查论文是一件很头疼的事情,网上免费查重检测力度又很一般┑( ̄Д  ̄)┍ 因为一次偶然同学推荐了解到这个网站,只要做新手任务就能得到很多积分,再进行抽奖就可以得到A币或者是至尊券可以免费使 ...
- 第一章 kubernetes概述
一.Kubernetes概述 1.官网地址:https://kubernetes.io 2.GuiHub:https://github.com/kubernetes/kubernetes 3.又来:谷 ...
- 金九银十,收下这份 Java String 面试题
请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · Android-NoteBook 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭 ...
- 安装docker-compose--翻译
Install Docker Compose 译文 安装 Docker Compose 你可以在macOS.Windows.64-bit Linux上运行 Compose 前提条件 Docker Co ...
- 【读书笔记】C#高级编程 第二十章 诊断
(一)诊断概述 名称空间System.Diagnostics提供了用于跟踪.事件日志.性能测量以及代码协定的类.System.Diagnostics.Contracts名称空间中的类可以定义前提条件. ...
- 深度学习库 SynapseML for .NET 发布0.1 版本
2021年11月 微软开源一款简单的.多语言的.大规模并行的机器学习库 SynapseML(以前称为 MMLSpark),以帮助开发人员简化机器学习管道的创建.具体参见[1]微软深度学习库 Synap ...