Vue – Emit Child to parent

In a vue2 application i need to send a value from a child to the parent. I try something like this

Child function

goTo(id: string) {
            this.$emit('goToSpots', id)
        },

Parent Component

 <Main
        class="px-5"
        @goToSpots="goToSpots()"
   />

Parent function

goToSpots(id: string) {
        this.selected = id
    },

The problem: this.selected returns undefined, can’t get param properly.

The question is: Whats is the proper way to send params?

>Solution :

In your HTML template, use

@goToSpots="goToSpots($event)"

or

@goToSpots="goToSpots"

instead. At the moment, you are not passing any argument to the function. If you don’t add brackets at all, the parameter is automatically added and if you use brackets, you can pass the reserved variable $event which contains the emitted data.