常规情况下我们在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. ios14--购物车优化2

    // // ViewController.m // 03-综合练习 // // Created by xiaomage on 15/12/28. // Copyright © 2015年 小码哥. A ...

  2. java异步编程

    异步编程提供了一个非阻塞事件驱动的模型.通过异步消除阻塞,可以让web服务响应更多请求.可以让系统更高效的执行.比如log框架,记录日志或异常时异步执行可避免影响正常业务流程的执行. 异步变成如何把线 ...

  3. Scala 是一门怎样的语言,具有哪些优缺点?

    保罗·格雷厄姆在<黑客与画家>中写道,Java属于B&D(捆绑与束缚)类型的语言.为何束缚手脚?因为要让新手和明星程序员写出类似质量的代 码,尽可能的抹消人的才华对程序的影响.不同 ...

  4. Linux分区方式 及 Xshell远程连接排错

    第1章 远程连接 1.1 Linux远程连接软件 Windows:    Xshell/SecureCRT/Putty mac:         终端ssh命令或iterm2 Android:    ...

  5. JavaScript中相等==和严格相等===的区别

    在JavaScipt中==(相等)和===(严格相等,strick equality 也有译作“恒等”.“全等”)用于比较两个值是否相等,两个运算符允许任意类型的操作数.如果操作数相等则返回true, ...

  6. akka设计模式系列-慎用ask

    慎用ask应该是Akka设计的一个准则,很多时候我们应该禁用ask.之所以单独把ask拎出来作为一篇博文,主要是akka的初学者往往对ask的使用比较疑惑. "Using ask will ...

  7. unity多语言本地化

    简介 嗯...一般来说做游戏啥的都不会只发一个国家,但是每个国家语言不同,就存在多语言本地化的问题,然后直接用过一个通过xml完成本地化的东东,然后策划反馈不会修改xml,扔给我一个excel让我自己 ...

  8. 【转】Java 集合系列09之 Map架构

    概要 前面,我们已经系统的对List进行了学习.接下来,我们先学习Map,然后再学习Set:因为Set的实现类都是基于Map来实现的(如,HashSet是通过HashMap实现的,TreeSet是通过 ...

  9. [ Luogu Contest 10364 ] TG

    \(\\\) \(\#A\) 小凯的数字 给出两个整数\(L,R\),从\(L\)到\(R\)按顺序写下来,求生成整数对\(9\)取模后的答案. 例如\(L=8,R=12\),生成的数字是\(8910 ...

  10. js中添加node.js语法支持

    File——>settings