CODEWITHSUNDEEP
javascriptvue.js
Nicky
Nicky

Reputation: 3817

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

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?

Upvotes: 0

Views: 1148

Answers (1)

azs06
azs06

Reputation: 3517

Instead of data use a computed property.

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

Upvotes: 4

Related Questions