[Vuejs]-Emitting data from child to parent component in Vue js

by

1👍

✅

The v-on needs the event name, and does not need another $emit unless you intend to re-emit the event to a grandparent component. See the Vue event handling docs. It should be

<Student
  v-on:addStudent="receiveStudent"
/>

Or short-hand

<Student
  @addStudent="receiveStudent"
/>

Other errors that need to be corrected:

  1. {{ students }} is called text interpolation and goes in between tags, not inside tags. Something like <div>{{ students }}</div> would make more sense if you want to display the entire array of students.

  2. You are not sending any actual props down to the Student. Based on Student.vue having props "name" and "program" you would pass down these props from the Parent like so:

<Student
  v-for="student in students"
  :key="student"
  :name="student.name"
  :program="student.program"
  @addStudent="receiveStudent"
>

Vue Playground example with corrected code

👤yoduh

Leave a comment