title: How do I get a value from $emit payload with Vue.js
body: <p>I'm emitting an event with various values from my <em>ConversationList</em> (child component) to <em>ConversationModel</em> (parent component).</p>
  
  <p><strong>Conversation List</strong></p>
  
  <pre><code>getConversation(conversation_id, receiver_id, username, avatar){
    this.$emit('open-conversation', receiver_id, conversation_id, username, avatar);
  }
  </code></pre>
  
  <p><strong>ConversationModal</strong></p>
  
  <p><em>Vue devtools output</em></p>
  
  <pre><code>[2,1,"Jeff","http://i.pravatar.cc/52"]
  </code></pre>
  
  <p><em>Template</em></p>
  
  <pre><code>&lt;converstations-list v-if="showConversation == false" v-on:open-conversation="getConversation($event)"&gt;&lt;/converstations-list&gt;
  </code></pre>
  
  <p><em>Method</em></p>
  
  <pre><code>getConversation(event){
      console.log(event.payload[0] + event.payload[1] + event.payload[2] + event.payload[2])
  },
  </code></pre>
  
  <p><strong>Error</strong></p>
  
  <blockquote>
    <p>Error in event handler for "open-conversation": "TypeError: Cannot read property '2' of undefined"</p>
  </blockquote>
  
  <p>I don't get it. The event is firing and has a payload object in the <code>devtools</code> that I can't access. What am I doing wrong?</p>