Chiamata di funzioni all'interno di template Vue.js

Question

mio modello:

<template id="players-template" inline-template> 
     <div v-for="player in players"> 
      <div v-bind:class="{ 'row': ($index + 1) % 3 == 0 }"> 
       <div class="player col-md-4"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h3 class="panel-title"> 
           <a href="#">{{ player.username }}</a> 
           <span class="small pull-right">{{ player.createdAt }}</span> 
          </h3> 
         </div> 

         <div class="panel-body"> 
          <img v-bind:src="player.avatar" alt="{{ player.username }}" class="img-circle center-block"> 
         </div> 
         <div class="panel-footer"> 
          <div class="btn-group btn-group-justified" role="group" aria-label="..."> 
           <a href="#" class="btn btn-primary btn-success send-message" data-toggle="tooltip" data-placement="bottom" title="Wyślij wiadomość" v-bind:id="player.id" @click="createConversation(player.id)"><span class="glyphicon glyphicon-envelope"></span>&nbsp;</a> 
           <a href="#" class="btn btn-primary btn-info" data-toggle="tooltip" data-placement="bottom" title="Pokaż profil"><span class="glyphicon glyphicon-user"></span>&nbsp;</a> 
           <a href="#" class="btn btn-primary btn-primary" data-toggle="tooltip" data-placement="bottom" title="Zobacz szczegółowe informacje o poście"><span class="glyphicon glyphicon-option-horizontal"></span>&nbsp;</a> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </template> 

Il mio script:

new Vue({ 
    el: 'body', 
    methods: { 
     createConversation: function(id) { 
      console.log("createConversation()"); 
      console.log(id); 
     } 
    } 
}); 

Quando il modello è il rendering mi viene un errore [Vue warn]: v-on:click="createConversation" expects a function value, got undefined. Non so come usare i metodi all'interno di un modello di componente. Se qualcuno potesse aiutarmi, apprezzerei è.

Answer 1

Il metodo deve essere nel componente, non nell'istanza Vue globale. Tutte le funzioni sono chiamate come this.createConversation dietro le quinte, quindi deve essere all'interno del componente per cui è il modello.

Answer 2

Se è necessario il metodo createConversation per essere nell'istanza Vue globale, è necessario guardare dispatching events. Il componente dovrebbe in questo modo:

Vue.component('playersTemplate', { 
    template: '#players-template', 
    methods: { 
    createConversation: function (id) { 
     this.$dispatch('createConversation', id) 
     } 
    } 
    } 
}); 

L'istanza globale Vue dovrebbe implementare l'evento createConversation, invece di un metodo:

new Vue({ 
    el: 'body', 
    events: { 
     createConversation: function(id) { 
      console.log("createConversation()"); 
      console.log(id); 
     } 
    } 
});