Vue 深度手表道具答案

【问题标题】：Vue deep watch propVue 深度手表道具
【发布时间】：2018-12-12 13:25:47
【问题描述】：

在我的组件中，我有一个计算属性

members() {
  return (this.club.properties || []).map(property => {
    const user = Object.assign({}, property.user, property, { user: undefined })
    return user
  })
},

这个计算属性是作为另一个组件上的 v-bind 给出的

<MyComponent :members="members" :club="club"/>

当我添加一个新组件时，MyComponent 组件会显示所有成员财产虽然

this.club.properties.push(someProperty)

MyComponent 没有被重新渲染，我必须刷新页面才能渲染新属性。

【问题讨论】：

标签： vue.js

【解决方案1】：

你需要做深拷贝才能让 Vue 反应式

this.club.properties.push(someProperty)
this.club = JSON.parse(JSON.stringify(this.club))

这很常见Vue reactivity problem

【讨论】：

是的，我也认为这是解决方案，因为在 club 对象中，properties 键指向内存中的另一个位置，所以我认为你需要让 this.club 意识到变化。
vue 不允许我这样做，因为俱乐部是道具。
然后您需要向父元素发出事件并更改父元素中的this.club。

【解决方案2】：

或者，您可以使用Vue.set(object, propertyName, value) 一次更新一个俱乐部属性，使其具有响应性。

见https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats

【讨论】：