Vue.js-如何在子組件中呈現數據更改？

Question

所以我有一個父組件Store ，它的子組件名為Order 。 來自父級的數據通過props傳遞給其子級，如下所示：

親

<Order :order="order" />

兒童

props: ['order']

我需要在子組件中使用一個名為orderIds的新數據變量，因此我聲明：

兒童

props: ['order'],
data: () {
  return {
    orderIds: Object.keys(this.order)
  }
}

然后，在視圖中渲染orderIds ：

{{orderIds}}

現在，只要父級中的order數據發生更改，它就會更新子order中的prop order ，但不會傳播到orderIds 。

當order發生變化時，如何更新orderIds ？

Answer 1

代替數據使用計算屬性。

computed: {
    orderIds: function () {
      return Object.keys(this.order);
    }
  }