Chức năng truyền Vue.js cho các đạo cụ không hoạt động

Question

Tôi gặp vấn đề khi truyền chức năng cho các thành phần không hoạt động theo cách được chỉ định trong tài liệu.

Đây là trong app.js tôi

methods: { 
    updateAnswer: function(question) { 
     console.log('question: '+question); 
    } 
} 

Đây là trong tôi html file:

<multiplechoice class="question counterIncrement counterShow active" id="q2" whenanswered="{{ updateAnswer('1') }}"></multiplechoice> 

Đây là trong tập tin components.js tôi:

props: [ 
    'whenanswered' 
], 

ready: function() { 
    this.whenanswered(); 
}, 

tôi đã thử điều này:

props: [ 
    { name: 'whenanswered', type: Function} 
]; 

nhưng vẫn không có may mắn.

Đây là trong giao diện điều khiển của tôi khi tôi tải trang:

Uncaught TypeError: this.whenanswered is not a function 

Bất kỳ trợ giúp sẽ được rất nhiều đánh giá cao :)

Answer 1

Bạn có thể làm điều này:

<multiplechoice class="question counterIncrement counterShow active" id="q2" :whenanswered="updateAnswer('1')"></multiplechoice> 

Nếu không có sự ':' (giống như v-ràng buộc) như bạn đã làm sẽ chỉ gửi một chuỗi và không đánh giá. Ngay cả với những người {{ }}.

Nhưng hãy nhớ rằng chức năng updateAnswer của bạn sẽ trả về một hàm. Vì lệnh chống của bạn sẽ thực hiện updateAnswer('1') và multiplechoice của bạn thực sự mong đợi một chức năng sẽ được thực hiện khi nó muốn.

methods: { 
    whenanswered: function(question) { // or whenanswered (question) { for ES6 
    return function() { ... } // or() => {...} for ES6 
    } 
} 

Answer 2

Một fiddle sẽ giúp đỡ, nhưng về cơ bản, bạn cần:

methods: { 
    whenanswered: function(question) { 
     ... 
    } 
} 

nếu bạn muốn gọi hàm đó. Prop chỉ là một chuỗi, không phải là một hàm.

Ví dụ:

<div id="app"> 
    Loading... 
    <data-table on-load="{{onChildLoaded}}"></data-table> 
</div> 

new Vue({ 
    el: "#app", 
    methods: { 
     onChildLoaded: function (msg) { 
      console.log(msg); 
     } 
    }, 
    components: { 
     'data-table': { 
      template: 'Loaded',  
      props: ['onLoad'], 
      ready: function() { 
       this.onLoad('the child has now finished loading!') 
      } 
     } 
    } 
});