chức năng gọi bên Vue.js mẫu

Question

mẫu của tôi:

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

kịch bản của tôi:

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

Khi mẫu được render tôi nhận được một lỗi [Vue warn]: v-on:click="createConversation" expects a function value, got undefined. Tôi không biết cách sử dụng các phương thức bên trong một mẫu thành phần. Nếu ai đó có thể giúp tôi, tôi sẽ đánh giá cao.

Answer 1

Phương pháp của bạn phải nằm trong cấu phần chứ không phải trong trường hợp Vue toàn cầu của bạn. Tất cả các chức năng được gọi là this.createConversation phía sau hậu trường, vì vậy nó cần phải nằm trong thành phần đó là mẫu cho.

Answer 2

Nếu bạn cần phương thức createConversation trên trường hợp Vue chung, bạn nên xem dispatching events. thành phần của bạn nên như thế này:

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

Các dụ Vue toàn cầu nên thực hiện sự kiện createConversation, thay vì một phương pháp:

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