#How to notify parent that the props changed in child

1 messages · Page 1 of 1 (latest)

undone blade
#

Hello, I have an issue. When I change the value of the prop "displayMenu" in the child, the value "displayMenu" of the parent doesn't change.

Moreover, I don't get it. The Nuxt3 doc seems so confusing. Should I do some "export default..." or a "<script setup>" without "export".

Thanks in advance.

cap1.png cap2.png
molten kernel
#

Hi, first of all, <script setup> is the new standard and the way to go.

#

Generally in Vue, you don’t want to mutate props. You emit the change and apply it on the parent.

#

(Be sure to switch to composition api on the docs)

undone blade
#

Thank you, I am reading the doc. I did this const emit = defineEmits(['update:displayMenu']); and @click="emit('update:displayMenu', false)"
I don't know if it's correct, but it seems close to what I saw on the doc. Now I must do @update="(n) => displayMenu = n" in the parent somehow.

undone blade
#

Ok it works :

Child :

const emit = defineEmits(['updateDisplay']);

<NuxtLink
  @click="$emit('updateDisplay', false)"
  to="/connexion"
  class="w-[40%] m-auto p-[5px] text-center rounded-xl bg-white"
 >
  Connexion
</NuxtLink>

Parent :

<SlidingMenu
  :sessionIsValid="sessionIsValid"
  :displayMenu="displayMenu"
  @update-display="(n) => (displayMenu = n)"
></SlidingMenu>
molten kernel
#

Nice 👍🏻

sleek dove
#

This looks wrong

#

You can sync the props instead of using the emit and update the variable to then pass it again

#

Just use v-model

molten kernel
#

This is not "wrong" @sleek dove . v-model is exactly the same as a prop + emit, it's just syntactic sugar, meaning it looks nicer. But to understand your code if your not familiar with it, this approach is fine.