[Vuejs]-Vue: Pass parent data to child when updated with button click

by

2👍

✅

Your child is not updating because you are using the local data property passedData in the template, not the props allInputs. If you will console the allInputs somewhere in the child component you will see that it is updating whenever the parent updates but as you are not using the prop directly so you are not seeing its reactivity. So, use props in your template instead of local data property, like this-

<p>{{ allInputs }}</p>

Not this-

<p>{{ passedData }}</p>

The approach you are trying to do is used when the child component wants to update the props passed by the parent but mutating parent props is erroneous because a child should not mutate (modify) the parent’s state. So we usually assign props to a local data property and then mutate that data property, not props (same as you are doing). You can read more about this concept here.

1👍

Instead of having passedData in your template like this:

<template>
    <div class="all-inputs">
        <p>{{ passedData }}</p>
    </div>
</template>

Change it to:

<template>
    <div class="all-inputs">
        <p>{{ allInputs }}</p>
    </div>
</template>

Leave a comment