常规情况下我们在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. 使用SimpleAdapter 适配器时显示网络上图片方法

    SimpleAdapter listItemAdapter = new SimpleAdapter(this, listItem, R.layout.items_list, new String[] ...

  2. C#的内存管理知识 .

    本章介绍内存管理和内存访问的各个方面.尽管运行库负责为程序员处理大部分内存管理工作,但程序员仍必须理解内存管理的工作原理,了解如何处理未托管的资源. 如果很好地理解了内存管理和C#提供的指针功能,也就 ...

  3. ZOJ2334 Monkey King 左偏树

    ZOJ2334 用左偏树实现优先队列最大的好处就是两个队列合并可以在Logn时间内完成 用来维护优先队列森林非常好用. 左偏树代码的核心也是两棵树的合并! 代码有些细节需要注意. #include&l ...

  4. windows 多mysql 实例

  5. 基于行为树的AI 与 Behavior Designer插件

    优点:    0.行为逻辑和状态数据分离,任何节点都可以反复利用.    1.高度模块化状态,去掉状态中的跳转逻辑,使得状态变成一个"行为".    2."行为" ...

  6. [Swift通天遁地]七、数据与安全-(14)使用单元测试进行邮箱格式的验证

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. Scaffold-DbContext-EFCore DB First

    在使用 Scaffold-DbContext迁移数据库的时候会遇到两个问题. 一.文件已存在,其实报错很明显,增加 -force即可. 二.大小写转换,不和数据库一样了,如果要保持和数据库一致.增加  ...

  8. 【NOIP2016】DAY1 T2 天天爱跑步

    [NOIP2016]DAY1 T2 天天爱跑步 Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.?天天爱跑步?是一个养成类游戏,需要玩家每天按时 ...

  9. P1968 美元汇率

    题目背景 此处省略maxint+1个数 题目描述 在以后的若干天里戴维将学习美元与德国马克的汇率.编写程序帮助戴维何时应买或卖马克或美元,使他从100美元开始,最后能获得最高可能的价值. 输入输出格式 ...

  10. 3分钟看懂flex布局

    首先要有个容器,并设置display:flex;display:-webkit-flex;该容器有以下六个属性: 1 2 3 4 5 6 7 8 9 10 11 12 flex-direction ( ...