时间戳

首页 > 解决方案 > Vue 深度手表道具

vue.js - Vue 深度手表道具

问题描述

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

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

解决方案

您需要进行深度复制以使 Vue 具有反应性

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

这是常见的Vue 反应性问题

推荐阅读