Javascript Vue.js将函数传递给道具不起作用

我有一个问题，就是将函数传递给组件的方式与文档中指定的方式不同

这在我的app.js中

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

这在我的html文件中：

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

我已经试过了：

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

但还是没有运气

当我加载页面时，这在我的控制台中：

Uncaught TypeError: this.whenanswered is not a function

---

任何帮助都将不胜感激：）

小提琴会有所帮助，但基本上，您需要：

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

如果你想调用这个函数。道具只是一个字符串，而不是一个函数

例如：

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

加载。。。
新Vue({
el:“应用程序”，
方法：{
onChildLoaded:函数（msg）{
控制台日志（msg）；
}
},
组成部分：{
“数据表”：{
模板：“已加载”，
道具：['onLoad']，
就绪：函数（）{
this.onLoad（'子级现在已完成加载！'）
}
}
}
});

您可以这样做：

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

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

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