5

I'm using Nuxt version 2.15.7 and Vue 2.6.14. My understanding is that child components are mounted before the parent component is mounted, as explained in this answer.

However, in my project I'm experiencing the opposite:

Parent.vue

<template>
    <div class="parent">
        <MessageCard ref="messageCard"></MessageCard>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log("Parent Mounted");
        console.log(this.$refs.messageCard); // undefined
    }
}
</script>

MessageCard.vue

<template>
    <div class="messageCard">Hello</div>
</template>

<script>
    export default {
        mounted() {
            console.log("Child mounted");
        }
    }
</script>

The output on my console shows:

Parent mounted
undefined
Child mounted

enter image description here

According to the vue forum Shouldn't the child component be mounted before the parent? I need to call methods on the child, but it's undefined. I've even tried this.$nextTick(), only to find the same results. I understand the resources I linked to are from 2018 and 2017 respectively... has this behavior changed in the last 4 years?

M -
  • 26,908
  • 11
  • 49
  • 81
  • 1
    You understood it correctly. A codesandbox might help to see exactly why because that shouldn't happen. – captainskippah Jan 11 '22 at 06:53
  • 1
    Ok, if the expected behavior is that `child` should indeed mount before `parent`, then I'll spend some time re-creating more parts of my project from scratch until the error shows up again. I'm using nuxt, pages, and `this.$route`, so it might take some time to get to the root-cause of this. – M - Jan 11 '22 at 07:35

0 Answers0