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 :)

Cassio Cabral · Accepted Answer · 2016-07-27 16:19:15Z

8

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
  }
}

edited Jul 27, 2016 at 16:19

answered Jul 26, 2016 at 1:49

Cassio Cabral

2,6923 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

swift · Accepted Answer · 2015-07-22 01:46:53Z

0

A fiddle would help, but basically, you need:

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

if you wanna call that function. A prop is just a string, not a function.

Example:

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

answered Jul 22, 2015 at 1:46

swift

1,1087 silver badges9 bronze badges

Collectives™ on Stack Overflow

Vue.js passing functions to props not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related