How do I get a value from $emit payload with Vue.js

Question

I'm emitting an event with various values from my ConversationList (child component) to ConversationModel (parent component).

Conversation List

getConversation(conversation_id, receiver_id, username, avatar){
  this.$emit('open-conversation', receiver_id, conversation_id, username, avatar);
}

ConversationModal

Vue devtools output

[2,1,"Jeff","http://i.pravatar.cc/52"]

Template

<converstations-list v-if="showConversation == false" v-on:open-conversation="getConversation($event)"></converstations-list>

Method

getConversation(event){
    console.log(event.payload[0] + event.payload[1] + event.payload[2] + event.payload[2])
},

Error

Error in event handler for "open-conversation": "TypeError: Cannot read property '2' of undefined"

I don't get it. The event is firing and has a payload object in the devtools that I can't access. What am I doing wrong?

Answer 1

in the event emitting from child component to the parent one, you will receive the parameters like you emit them :

So remove $event from your getConversation handler:

<converstations-list v-if="showConversation == false" v-on:open-conversation="getConversation"></converstations-list>

and implement the getConversation method as follow :

 getConversation(receiver_id, conversation_id, username, avatar){
     // do whatever you want with that parameters
   }