常规情况下我们在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. Linux 学习之路:认识shell和bash

    一.shell  计算机硬件的直接控制者是操作系统的内核(kernel),因为内核的重要性,所以作为用户的我们是无法直接操作内核的,所以我们需要shell调用应用程序或者双击打开安装的应用软件与内核之 ...

  2. go语言笔记——append是内置的函数!!!new是一个函数!!!调试可以使用闭包,本质上是print调试,尼玛!

    内置函数 Go 语言拥有一些不需要进行导入操作就可以使用的内置函数.它们有时可以针对不同的类型进行操作,例如:len.cap 和 append,或必须用于系统级的操作,例如:panic.因此,它们需要 ...

  3. [转载]目标检测的图像特征提取之(一)HOG特征(zouxy09@qq.com)

    1.HOG特征: 方向梯度直方图(Histogram of Oriented Gradient, HOG)特征是一种在计算机视觉和图像处理中用来进行物体检测的特征描述子.它通过计算和统计图像局部区域的 ...

  4. 洛谷 p1625

    高精度 我以为这题必有高论,怎么想也想不出来,没想到竟是如此粗鄙做法. 我们写一个高精度模拟一下,然后枚举约数看是否能约分,由于我不会高精度除法,就抄了一发 其实这种两项之比和项数有关的数列是不能推通 ...

  5. bzoj4753

    bzoj4753 树形dp+01分数规划 这是一个典型的树形背包+01分数规划.看见分数形式最大就应该想到01分数规划. 于是套用分数规划,每次用树形背包检验. 首先这是一棵树,不是一个森林,所以我们 ...

  6. PCB MS SQL 标量函数(CLR) 实现DataTable转Json方法

    一.准备需转为json字符串的DataTable数据 在数据库中执行一段SQL返回的数据 需转换后的JSON字符串的效果 [{"TechName":"开料",& ...

  7. windows怎么进如debug调试

    主要说一下64位Win7使用debug程序的方法 首先你要下载一个DOSBOX程序 这个程序是一个dos模拟器 这个程序的制作目的是运行经典的DOS游戏 -.- 下载地址:http://www.dos ...

  8. springMVC是什么等七个问题

  9. [转]Window2008站点安全设置,IIS7/IIS7.5中目录执行权限的设置方法

    本文转自:http://blog.snsgou.com/post-510.html 最近帮一个朋友管理Window 2008服务器,发现有个站点是用asp写的,更可怕的是还有传说中的“上传漏洞”,在上 ...

  10. 关于GIT使用过程中遇到的问题

    npm构建,将所需要安装的依赖添加至package.json文件中,使用cnpm i进行安装 #拉去指定项目的默认分支: git pull http://username:password@gitla ...