javascript - Vuejs2:使用对象作为 Prop 时如何判断 Prop 更新？

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 属性来选择不同的组件。我的问题是，如何检测子组件中的提要对象更改？就像我设置的时候一样

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 = '我不再好了';

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