呼び出し機能

Question

マイテンプレート：

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

マイスクリプト：

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

テンプレートは、私はエラー[Vue warn]: v-on:click="createConversation" expects a function value, got undefinedを取得し、レンダリングされたとき。私は、コンポーネントテンプレートの中でメソッドを使う方法を知らない。誰かが私を助けることができたら、私は感謝しています。

Answer 1

メソッドはグローバルVueインスタンスではなくコンポーネント内にある必要があります。すべての関数は背後でthis.createConversationと呼ばれているため、テンプレートのコンポーネント内にある必要があります。

Answer 2

グローバルVueインスタンス上にcreateConversationメソッドが必要な場合は、dispatching eventsを参照してください。あなたのコンポーネントはこれを好む必要があります。

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

グローバルVueのインスタンスをcreateConversationイベントを実装する必要があり、代わりに方法：それは完全に別の何かをするので、私は、そのコンポーネントでこの機能を望んでいない

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