Vuejs修改对象数组

有一个对象数组：

const dataInfo = [
    {name:'zhangsan',age:12},
    {name:'zhangsan',age:12},
    {name:'zhangsan',age:12},
    {name:'zhangsan',age:12},
]

若此时给 dataInfo 的某一项添加一个属性，页面是不会有响应的：

this.dataInfo.forEach((item)=>{
    item.color = 'blue'
})

这是因为 Vue2 无法侦测到对象属性的新增，若之前就存在 color 属性上面的更改就是生效的。

解决方法：

map

this.dataInfo = this.dataInfo.map((item)=>{
    return {
        ...item,
        color:'blue',
    }
})

$set

this.dataInfo.forEach((item)=>{
    this.$set(item,'color','blue')
})