Vue.js passing functions to props not working

Question

I have a problem that passing functions to components is not working the way it's specified in the documentation.

This is in my app.js

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

This is in my html-file:

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

This is in my components.js file:

props: [
    'whenanswered'
],

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

I have already tried this:

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

but still no luck.

This is in my console when I load the page:

Uncaught TypeError: this.whenanswered is not a function

Any help would be very much appreciated :)

Answer 1

You could do this:

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

Without the ':'(same as v-bind) like you did will only send a string and not evaluate. Even with those {{ }}.

But remember that your updateAnswerfunction should return a function. Since your prop will execute updateAnswer('1') and your multiplechoiceactually expects a function that will be executed when it wants.

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