Vue.js - How to render data changes in child component?

Question

So I have a parent component Store that has a child component called Order. The data from the parent is passed via props to its child, like so:

parent

<Order :order="order" />

child

props: ['order']

I need to use a new data variable in the child component called orderIds, so I declare that:

child

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

Then, I render the orderIds in the view:

{{orderIds}}

Now, whenever the order data changes in the parent, it updates the prop order in the child, but it is not propagated through to orderIds.

How would I update orderIds when something changes in order?

azs06 · Accepted Answer · 2017-04-06 13:02:59Z

4

Instead of data use a computed property.

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

answered Apr 6, 2017 at 13:02

azs06

3,5072 gold badges24 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tomwang1013 Over a year ago

But this way, we can't update orderIds in child component. It is common that we use props to initialize data and change data afterwards.

azs06 Over a year ago

You can emit an event to update the order on the parent component and hence updating the orderId on child component, or you could use a computed setter, or you could initialize data with order and use computed property based on that. The answer I added was appropriate for the asked question.

Collectives™ on Stack Overflow

Vue.js - How to render data changes in child component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related