Initialising data from an object prop in a Vue component

Question

I have two Vue components, EventTask and EventCard. EventTask has a currentEvent object in data, which I pass as a prop to EventCard like so

<event-card :current-event="currentEvent" />

In EventCard, I initialise an event data property from the currentEvent prop, as suggested in this answer

export default {
  name: 'EventCard',
  props: {
    currentEvent: {
      type: Object,
      required: false
    }
  },
  data: function () {
    return {
      event: { ...this.currentEvent }
    }
  }
}

However, for some reason, the event data property is not being set correctly. Here's what I see in the Vue developer tools

Notice that the currentEvent prop is an object with a with a bunch of properties, but the event data property is an empty object. Why is the data property not being initialised correctly from the prop?

Can you share a simple demo/fiddle representing your scenario, because it works in normal cases. — Majed Badawi
– Majed Badawi, Commented Jul 30, 2020 at 19:07
why do you need to create another property in data? you can use the same currentEvent (this.currentEvent) in your EventCard component. Any specific reason for creating another property in data?. The other way is to assign the currentEvent to event (in data) in one of the life cycles, you can use mounted() {this.event = this.currentEvent } — Sowmyadhar Gourishetty
– Sowmyadhar Gourishetty, Commented Jul 30, 2020 at 19:11
@SowmyadharGourishetty I need to create another property in data because I will be modifying this object in the EventCard component, but I don't want these changes to propogate to the EventTask component — Dónal
– Dónal, Commented Jul 30, 2020 at 19:21

tony19 · Accepted Answer · 2022-07-16 00:06:50Z

2

This can occur if currentEvent is updated after EventCard has already initialized. Note that data() is not invoked reactively, so changes to currentEvent would not re-initialize event.

One solution is to use a watcher on currentEvent to copy it to event:

export default {
  watch: {
    currentEvent(newValue) {
      this.event = { ...newValue }
    }
  }
}

demo

edited Jul 16, 2022 at 0:06

answered Jul 30, 2020 at 20:06

tony19

140k24 gold badges281 silver badges354 bronze badges

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

1 Comment

Dónal Over a year ago

I think currentEvent being updated after EventCard has initialized is exactly what the problem is. I didn't realise that data() is invoked only once, rather than reactively.

Sowmyadhar Gourishetty · Accepted Answer · 2020-07-30 19:24:21Z

0

you can try the below code

export default {
  name: 'EventCard',
  props: {
    currentEvent: {
      type: Object,
      required: false
    }
  },
  data: function () {
    return {
      event: null
    }
  },
  mounted () {
    this.event = this.currentEvent // you can also try clone here.
  }
}

answered Jul 30, 2020 at 19:24

Sowmyadhar Gourishetty

1,8981 gold badge10 silver badges15 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 00:44:38Z

0

Try doing it like this instead:

export default {
  name: 'EventCard',
  props: {
    currentEvent: {
      type: Object,
      required: false
    }
  },
  data: function () {
    return {
      event: this.currentEvent
    }
  }
}

Source : https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

edited Jul 15, 2022 at 0:44

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 30, 2020 at 19:25

Samy Kacimi

1,2389 silver badges25 bronze badges

2 Comments

Dónal Over a year ago

AFAIK, it's recommended that you don't do this when the prop is an object or array (which are passed by reference), because changes in the child will also be reflected in the parent. Source stackoverflow.com/a/40435856/2648

Samy Kacimi Over a year ago

Okay! Thanks for the info

Collectives™ on Stack Overflow

Initialising data from an object prop in a Vue component

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related