博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue 对对象的属性进行修改时,不能渲染页面 vue.$set()
阅读量:5730 次
发布时间:2019-06-18

本文共 810 字,大约阅读时间需要 2 分钟。

hot3.png

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化

原因如下:

**受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。 **

官方API:Vue.set():

此时我们需要知道Vue.set()需要哪些参数,

调用方法:Vue.set( target, key, value )

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值

Tip:Vue.set()在methods中也可以写成this.$set()

解决办法:

this.$set(this.oilBrandsArr[index], 'checked', true)

**注意: **如果要对这个对象进行$set操作就不要用别的方法对这个对象进行操作,否则this.$set()则不会生效

this.oilBrandsArr[i].checked = true

别的地方又用this.$set() 则都不会触发更新

附加:有时你想向一个已有对象添加多个属性,例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是,这样添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

转载于:https://my.oschina.net/u/3608045/blog/3003038

你可能感兴趣的文章
关于CefSharp.WinForms的学习
查看>>
灵活运用 SQL SERVER FOR XML PATH
查看>>
es 加磁盘扩容
查看>>
linux 参数内核
查看>>
使用Azcopy在Azure上进行HBase的冷热备份还原
查看>>
计组_定点数一位乘_布斯公式
查看>>
linux下使用过的命令总结(未整理完)
查看>>
ES6的一些文章
查看>>
LeetCode 198, 213 House Robber
查看>>
New Year Permutation(Floyd+并查集)
查看>>
Qt编写输入法V2018超级终结版
查看>>
<context:component-scan>详解
查看>>
DS博客作业07--查找
查看>>
[JOI2017] サッカー (Soccer)
查看>>
Git 方法
查看>>
[Python] numpy.nonzero
查看>>
2016-11-29
查看>>
C#反射的坑
查看>>
css3 box-shadow阴影(外阴影与外发光)讲解
查看>>
时间助理 时之助
查看>>