wywoływania funkcji wewnątrz Vue.js szablonu

Question

mojego szablonu:

<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> 

Mój skrypt:

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

Gdy szablon jest trójwymiarowa i dostaje błąd [Vue warn]: v-on:click="createConversation" expects a function value, got undefined. Nie wiem, jak używać metod w szablonie komponentu. Jeśli ktoś mógłby mi pomóc, byłbym wdzięczny.

Answer 1

Twoja metoda powinna znajdować się w komponencie, a nie w globalnej instancji Vue. Wszystkie funkcje są nazywane za kulisami jako this.createConversation, więc musi znajdować się w komponencie, który jest szablonem.

Answer 2

Jeśli potrzebujesz metody createConversation do globalnej instancji Vue, powinieneś spojrzeć na dispatching events. Komponent powinien słuszne:

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

Światowy instancji Vue powinny wdrożyć zdarzenie createConversation, zamiast metody:

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