कॉलिंग कार्यों

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

यदि आपको ग्लोबल वू इंस्टेंस पर होने के लिए निर्माण कनवर्जन विधि की आवश्यकता है, तो आपको 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); 
     } 
    } 
});