Question

假设我有一个数组feedsArray，则示例值可能如下所示：

this.feedsArray = [
  {
    id: 1,
    type: 'Comment',
    value: 'How are you today ?'
  },
  {
    id: 2,
    type: 'Meet',
    name: 'Daily sync up'
  }
]

假设我已经注册了两个组件：Comment和Meet，每个组件的prop设置如下：

props: {
  feed: Object
}

并且主要组件具有以下定义：

<component v-for="feed in feedsArray" :feed="feed" :key="feed.id" :is="feed.type"></component>

如您所见，它使用is属性选择其他组件。我的问题是，如何检测子组件中的feed对象更改？就像我设置

this.feedsArray[0] = {
  id: 1,
  type: 'Comment',
  value: 'I am not ok'
}

Comment组件如何检测到更改？我试图在子组件中添加观察者定义，如下所示：

watch: {
  feed: {
    handler (val) {
      console.log('this feed is changed')
    },
    deep: true
  }
},

但是在这里不起作用。有人知道如何解决这个问题吗？

Answer 1

请勿使用索引直接分配给数组-而是使用splice()，否则JavaScript无法检测到您已更改了数组。

如果您只想更改对象已存在键的值，则只需对其进行更新，例如this.feeds[0].value = 'I am not okay any more';

这仅适用于现有密钥-否则，您必须使用this.$set(this.feeds[0], 'value', 'I am not okay any more');

Vuejs2：在将对象用作道具时如何判断道具更新？

1 个答案: