Hey there, I'm facing an issue where I need to update a prop in my child component when the parent component changes the value. However, I'm attempting to do this in a unique way and running into a problem where the child prop is not being 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)
}
}
Looking at the components above, I am modifying some data (event) in activity.vue and calling showMeet() from the child component. My goal is to update the value in meet.vue from activity.vue.
I initially thought this approach would suffice, but it seems that it is not working as expected. I suspect that the issue lies in how the "meet" prop in time.vue receives its value from a function when it is called. In the case where the parent component activity.vue invokes it, the prop "meet" does not receive any value in return, hence resulting in the prop in meet.vue not being updated.
Do you have any suggestions on how to update the child component successfully? I'm open to alternative approaches if you have a better solution. Thank you!