One-Way Data Flow: Child component doesn't update when prop is asynchronously updated by parent

Question

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to reason about. In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. - One-Way Data Flow

The Vue2 Component Docs suggests doing the following to use props as an initial value:

// via https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow
props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

So in my code I mimicked those instructions here. However data() in Note.vue isn't being updated even though the prop value is received according to vue-devtools.

Haven't had success setting the values with the mounted or created lifescyle methods.

When I use static data, this seems to work fine, how can I ensure the child component reacts to receiving props when it comes from a remote source?

Saurabh Saurabh · Accepted Answer · 2016-12-12T17:42:05

When you are passing initialNote as prop for initial value, but I see initialNote is being populated asynchronously in getNote method, so it will not be present initially when the component will be mounted. It will be populated after some time by the time initialisation would have already happened.

In the example give in vue documentation, initialCounter is static value which will perfect as it will have same value from beginning.

One-Way Data Flow: Child component doesn't update when prop is asynchronously updated by parent

1 Answers