Vue.js übergibt Funktionen an Requisiten funktioniert nicht

Question

Ich habe ein Problem, dass die Weitergabe von Funktionen an Komponenten funktioniert nicht so, wie es in der Dokumentation angegeben ist. Diese

ist in meinem app.js in meinem html-Datei

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

Dies ist:

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

Dies ist in meiner components.js Datei:

props: [ 
    'whenanswered' 
], 

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

I habe das schon probiert:

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

aber immer noch kein Glück.

Dies ist in meiner Konsole wenn ich die Seite zu laden:

Uncaught TypeError: this.whenanswered is not a function 

Jede Hilfe sehr würde sehr geschätzt :)

Answer 1

Sie können dies tun:

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

Ohne das ':' (wie bei v-bind), wie Sie nur einen String tat sendet und nicht zu bewerten. Auch mit diesen {{ }}.

Aber denken Sie daran, dass Ihre updateAnswer Funktion eine Funktion zurückgeben sollte. Da Ihre Requisite updateAnswer('1') ausführt und Ihre multiplechoice tatsächlich eine Funktion erwartet, die ausgeführt wird, wenn sie es wünscht.

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

Answer 2

Eine Geige würde helfen, aber im Grunde, was Sie brauchen:

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

wenn Sie diese Funktion aufrufen möchten. Eine Requisite ist nur eine Zeichenfolge, keine Funktion.

Beispiel:

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