Function in Parent never called following an $emit from the Child

Question

I have included an $emit in an axios post of a child component as follows.

 axios.post('/api/register', qdata)
  .then((response) => {
   this.$emit('userUpdated', response.data)
  })

In the parent component, I have a div element in the html code containing a v-on, which refers to the userUpdated of the $emit.

 <div id="username" v-on:userUpdated="nameUpddated($event)">
   <p>{{userid}}</p>
 </div>

Finally, the script section of the parent contains the following function called by the v-on.

nameUpddated: function (updatedUser) {
  this.userid = updatedUser
}

I have validated that the axios returns a proper value in the Child component. However, the function in the parent never gets called.

Answer 1

In your parent component use child component name instead of div.

Edit: I also added v-if to conditionally show the component.

 <child-component v-if="isVisible" id="username" v-on:userUpdated="nameUpddated($event)">
   <p>{{userid}}</p>
 </child-component>

Also, you need to add a data property to show the component conditionally (initially hidden).

   data () {
        return {
            isVisible: false
        }
    }

Now, it is up to you at what point you want to show the child component. You would simply change isVisible to true.

After making this change, it should work as expected.

---

Note: please remember to register the child component properly as well in your parent component:

import childComponent from '@/components/childComponent'

export default {
    components: {
        childComponent
    }
}