Javascript 在 Vue.js 模板中调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34812486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling functions inside Vue.js template
提问by nix9
My template:
我的模板：
<template id="players-template" inline-template>
<div v-for="player in players">
<div v-bind:class="{ 'row': ($index + 1) % 3 == 0 }">
<div class="player col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a href="#">{{ player.username }}</a>
<span class="small pull-right">{{ player.createdAt }}</span>
</h3>
</div>
<div class="panel-body">
<img v-bind:src="player.avatar" alt="{{ player.username }}" class="img-circle center-block">
</div>
<div class="panel-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<a href="#" class="btn btn-primary btn-success send-message" data-toggle="tooltip" data-placement="bottom" title="Wy?lij wiadomo??" v-bind:id="player.id" @click="createConversation(player.id)"><span class="glyphicon glyphicon-envelope"></span> </a>
<a href="#" class="btn btn-primary btn-info" data-toggle="tooltip" data-placement="bottom" title="Poka? profil"><span class="glyphicon glyphicon-user"></span> </a>
<a href="#" class="btn btn-primary btn-primary" data-toggle="tooltip" data-placement="bottom" title="Zobacz szczegó?owe informacje o po?cie"><span class="glyphicon glyphicon-option-horizontal"></span> </a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
My script:
我的脚本：
new Vue({
el: 'body',
methods: {
createConversation: function(id) {
console.log("createConversation()");
console.log(id);
}
}
});
When the template is rendering i gets an error [Vue warn]: v-on:click="createConversation" expects a function value, got undefined. I don't know how to use methods inside a component template. If someone could help me I would appreciate is.
当模板渲染时，我收到一个错误[Vue warn]: v-on:click="createConversation" expects a function value, got undefined。我不知道如何在组件模板中使用方法。如果有人可以帮助我，我将不胜感激。
采纳答案by Gus
If you need the createConversation method to be on the global Vue instance, you should look at dispatching events. Your component should like this:
如果您需要在全局 Vue 实例上使用 createConversation 方法，您应该查看dispatching events。你的组件应该是这样的：
Vue.component('playersTemplate', {
template: '#players-template',
methods: {
createConversation: function (id) {
this.$dispatch('createConversation', id)
}
}
}
});
The global Vue instance should implement the createConversation event, instead of a method:
全局 Vue 实例应该实现 createConversation 事件，而不是一个方法：
new Vue({
el: 'body',
events: {
createConversation: function(id) {
console.log("createConversation()");
console.log(id);
}
}
});
回答by Jeff
Your method should be in the component, not in your global Vue instance. All functions are called as this.createConversationbehind the scenes, so it needs to be within the component that is the template for.
您的方法应该在组件中，而不是在您的全局 Vue 实例中。所有函数都this.createConversation在幕后调用，因此它需要在作为模板的组件内。
