常规情况下我们在vue实例的data中设置响应数据。但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢?

let vm = new Vue{

el: '#app',

data: {

obj: { k: 'v' }

}, ...

}

有三种解决方案: 
方案一:利用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)创建新对象

例: this.obj.k1='v1'; this.obj = Object.assign({}, this.obj) 或 this.obj = Object.assign({}, this.obj,{'k1','v1'})

vue中对象属性改变视图不更新问题的更多相关文章

  1. 解决vue中对象属性改变视图不更新的问题

    在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...

  2. vue修改对象属性值视图上没有更新

    data(){ return { obj:{ name:' ' } } } 方法一: this.$set(this.obj, 'name', '新的值'); 方法二; Vue.set(vm.obj, ...

  3. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  4. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  5. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  6. vue数组中对象属性变化页面不渲染问题

    问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...

  7. 8种Vue中数据更新了但页面没有更新的情况

    目录 1.Vue 无法检测实例被创建时不存在于 data 中的 属性 2. Vue 无法检测'对象属性'的添加或移除 3.Vue 不能检测利用数组索引直接修改一个数组项 4.Vue 不能监测直接修改数 ...

  8. vue中修改数组,dom未更新的问题

    vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新? 比如有一个数组对象: obj = [{'name': 'joy'},{'name': 'bowen'}] 我要循坏插入某个 ...

  9. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

随机推荐

  1. codeforce 1073E. Segment Sum

    看到这个就是数位DP了,然而细节极多,对于i=1状态直接判了,还有最后一位直接算了 设f[i][zt][0/1]表示枚举到第i位,用了那些数字,是否有前导0(前导0不计入数字,否则就不知道后面有没有0 ...

  2. 【POJ 2259】 Team Queue

    [题目链接] http://poj.org/problem?id=2259 [算法] 由题,一个人入队时,若这个人所在的组已经有人在队列中,则加入队列,否则排到队末 因此我们发现,这个队列一定是由连续 ...

  3. PCB 使用Nginx让IIS7实现负载均衡

    在PCB行业众多系统中PCB工程系统是主要的数据生产者, 它与外部系统数据交互是最多的,经统计接口数超过100个之多;这么多接口调用与管理起来是混乱的,所以今年年初对工程集成方式改造,将原来的点对点的 ...

  4. Reward(toposort)

    http://acm.hdu.edu.cn/showproblem.php?pid=2647 #include <stdio.h> #include <string.h> #i ...

  5. Java命名规范(新手宝典)

    很多刚开始学习Java的童鞋都不知道如何命名类文件,方法名,字段名,常量名等,今天抽出时间整理了了一下.大佬绕过 Java命名的组成规则:英文大小写字母,数字,$和_. 这里有几点需要注意: 不能以数 ...

  6. hdu---3177 Crixalis's Equipment 根据 两个元素 之间的权衡进行排序

    Crixalis's Equipment Problem Description Crixalis - Sand King used to be a giant scorpion(蝎子) in the ...

  7. 【HTML5】基于HTML5的高性能动画与游戏

    其实这篇文章类似版本早在12年就在网上各处出现了,也随着HTML5的兴起,HTML的新特性也是倍受开发者们追捧,自然相关HTML5的高性能动画与游戏的相关文章也是层出不穷的,笔者也是在12年接触的相关 ...

  8. 参加2016华为codecraft编程精英挑战赛后感

    2016年4月参加了华为的软件比赛. 关于比赛:给了一道图论的np-hard问题.刚开始完全不知道怎么入手,请教过师兄,自己也琢磨过,没有什么万全的解决方法.注意,这里说的是万全的办法.本科搞算法时候 ...

  9. 快速搭建Hadoop及HBase分布式环境

    本文旨在快速搭建一套Hadoop及HBase的分布式环境,自己测试玩玩的话ok,如果真的要搭一套集群建议还是参考下ambari吧,目前正在摸索该项目中.下面先来看看怎么快速搭建一套分布式环境. 准备 ...

  10. HTML中的行级标签和块级标签 《转换》

    1.html中的块级标签 显示为“块”状,浏览器会在其前后显示折行.常用的块级元素包括: <p>, <ul>,<table>,<h1~h6>等. 2.h ...