Vue.js przekazuje funkcje rekwizytom nie działającym

Question

Mam problem z tym, że przekazywanie funkcji do komponentów nie działa w sposób opisany w dokumentacji.

Jest w moich app.js

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

Jest to w moim pliku HTML:

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

To w moim components.js pliku:

props: [ 
    'whenanswered' 
], 

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

I próbowałem już tego:

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

ale wciąż nie ma szczęścia.

To w moim konsoli kiedy załadować stronę:

Uncaught TypeError: this.whenanswered is not a function 

Każda pomoc będzie bardzo mile widziane :)

Answer 1

Można to zrobić:

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

Bez ':' (tak samo jak v-wiązania) jak ty będzie wysłać tylko ciąg i nie oceniać. Nawet z tymi {{ }}.

Należy jednak pamiętać, że funkcja updateAnswer powinna zwrócić funkcję. Ponieważ twój rekwizyt wykona updateAnswer('1'), a twój multiplechoice faktycznie oczekuje funkcji, która zostanie wykonana, kiedy będzie tego potrzebować.

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

Answer 2

ryba pomoże, ale w zasadzie, trzeba:

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

jeśli chcesz wywołać tę funkcję. Rekwizyt to tylko ciąg znaków, a nie funkcja.

Przykład:

<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!') 
      } 
     } 
    } 
});