Vue.js passando le funzioni agli oggetti di scena non funzionanti

Question

Ho un problema che passare le funzioni ai componenti non funziona come è specificato nella documentazione.

Questo è a mio app.js

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

Questo è a mio file HTML:

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

Questo è nel mio file components.js:

props: [ 
    'whenanswered' 
], 

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

I ho già provato questo:

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

ma ancora senza fortuna.

Questo è a mio console quando carico la pagina:

Uncaught TypeError: this.whenanswered is not a function 

Qualsiasi aiuto sarebbe molto apprezzato :)

Answer 1

Si potrebbe fare questo:

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

Senza il ':' (lo stesso di v-bind) come avete fatto invierà solo una stringa e non valutare. Anche con quelli {{ }}.

Ricordare che la funzione updateAnswer deve restituire una funzione. Dal momento che il puntello eseguirà updateAnswer('1') e il tuo multiplechoice in realtà si aspetta una funzione che verrà eseguita quando lo desidera.

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

Answer 2

un violino avrebbe aiutato, ma in fondo, è necessario scaricare:

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

se vuoi chiamare quella funzione. Un puntello è solo una corda, non una funzione.

Esempio:

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