解决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 ...
随机推荐
- day25--Java集合08
Java集合08 15.HashTable 15.1HashTable的基本介绍 存放的元素是键值对:即K-V HashTable的键和值都不能为null HashTable的使用方法基本上和Hash ...
- 给你的博客加个aplayer
1.在 layout.ejs 中 body 标签内粘贴入以下 <!--音乐--> <link rel="stylesheet" href="https: ...
- MySQL源码分析之SQL函数执行
1.MySQL中执行一条SQL的总体流程 2.SQL函数执行过程 1.MySQL中执行一条SQL的总体流程 一条包含函数的SQL语句,在mysql中会经过: 客户端发送,服务器连接,语法解析,语句执行 ...
- Swift中的Result 类型的简单介绍
Swift 5引入了一个新的Result类型, 它使用枚举来处理异步函数的结果. 苹果文档对该类型的描述: A value that represents either a success or a ...
- Docker网络讲解 及实验redis集群部署
理解docker0 准备工作:清空所有的容器,清空所有的镜像 docker rm -f $(docker ps -a -q) # 删除所有容器 docker rmi -f $(docker image ...
- KingbaseES V8R6集群维护案例之--修改securecmdd工具服务端口
案例说明: 在一些生产环境,为了系统安全,不支持ssh互信,或限制root用户使用ssh登录,KingbaseES V8R6可以使用securecmdd工具支持主机之间的通讯.securecmdd工具 ...
- PostgreSQL 时间函数分类与特性
KingbaseES 时间函数有两大类:返回事务开始时间和返回语句执行时的时间.具体函数看以下例子: 1.返回事务开始时的时间 以下函数返回事务开始的时间(通过 begin .. end 两次调用结果 ...
- torch.sort 和 torch.argsort
定义 torch.sort(input,dim,descending) torch.argsort(input,dim,descending) 用法 torch.sort:对输入数据排序,返回两个值, ...
- CMU 15-445 Project 0 实现字典树
原文链接:https://juejin.cn/post/7139572163371073543 项目准备 代码.手册 本文对应 2022 年的课程,Project 0 已经更新为实现字典树了.C++1 ...
- flink-cdc实时同步mysql数据到elasticsearch
本文首发于我的个人博客网站 等待下一个秋-Flink 什么是CDC? CDC是(Change Data Capture 变更数据获取)的简称.核心思想是,监测并捕获数据库的变动(包括数据 或 数据表的 ...