CODEWITHSUNDEEP
javascriptvue.js
hrishikeshpaul
hrishikeshpaul

Reputation: 469

Updating prop value in child component from parent Vue

So, I want to update a prop in my child component when my parent component updates the value. But I'm doing this a little differently due to which I'm having a problem where the child prop is NOT getting updated.

meet.vue

<template>
...
<div>{{ meet.name }} </div>
...
</template>
...
props: ["meet"]

time.vue

<template>
...
<meet :meet="showMeet(e.id)" /> // id is coming because meet is in a v-for
</template>
...
props: ['events'],
...
methods: {
   showMeet(id) {
      this.events.forEach(e => { if(e.id === id) return e})
   }
}

activity.vue

<template>
...
<time :events='events' ref="time" />
...
</template>
...
methods: {
   sendEvents(event) {
      // some manipulation to event
      this.$refs.time.showMeet(event.id)
   }
}

So as you can see form the components above, I'm manipulating some data (event) in activity.vue and calling showMeet() which is in the child component. I want to update the value in meet.vue from activity.vue.

I thought this would work, but it doesn't. I feel its because the prop "meet" in time.vue is getting its value from a function when it calls it. But in other case (where the parent, activity.vue calls it), the prop "meet" doesn't get any value returned. Hence the prop in meet.vue is not updated.

Any idea how to update the child? I'm not sure this is the right way to do it, but if someone has a better way, please do let me know. Thank you!

Upvotes: 0

Views: 8965

Answers (1)

Emīls Gulbis
Emīls Gulbis

Reputation: 2070

From vue.js docs https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

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.

If you want to update prop you should update parents data instead. For example, you can use $emit('input', value) as shown here
https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Upvotes: 1

Related Questions