我的模板:

<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>&nbsp;</a>
                                <a href="#" class="btn btn-primary btn-info" data-toggle="tooltip" data-placement="bottom" title="Pokaż profil"><span class="glyphicon glyphicon-user"></span>&nbsp;</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>&nbsp;</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

我的 playbook :

new Vue({
    el: 'body',
    methods: {
        createConversation: function(id) { 
            console.log("createConversation()");
            console.log(id);
        }
    }
});

当模板渲染时,我得到一个错误[Vue warn]: v-on:click="createConversation" expects a function value, got undefined.我不知道如何在组件模板中使用方法.如果有人能帮助我,我将不胜感激.

推荐答案

如果需要在全局Vue实例上使用createConversation方法,那么应该查看dispatching events.您的组件应该是这样的:

Vue.component('playersTemplate', {
  template: '#players-template',
  methods: {
    createConversation: function (id) {
        this.$dispatch('createConversation', id)
      }
    }
  }
});

全局Vue实例应该实现createConversation事件,而不是方法:

new Vue({
    el: 'body',
    events: {
        createConversation: function(id) { 
            console.log("createConversation()");
            console.log(id);
        }
    }
});

Vue.js相关问答推荐

VueUse onClickOutside不支持右键单击

如何在AXIOS调用响应中动态导入视频并创建它的绝对路径?

我可以手动访问 vue-router 解析器吗?

处理多张卡片中的按钮

如何在 VUE.js 中重新刷新时保持多层 b-collapse 菜单打开?

在 bootstrap-vue 中渲染自定义样式

Vue.js 和观察者模式

如何在 vue.js 构建中重命名 index.html?

使用 aria-live 在 vue.js 中向屏幕阅读器宣布信息

webpack模块解析失败意外字符'@'

Vue&TypeScript:在项目目录外的 TypeScript 组件中实现导入时如何避免错误 TS2345?

如何从 vue.js 中的自定义组件中冒泡点击事件?

Vue.js 如果在视图中

Vuex - 何时从 http 服务器加载/初始化存储数据

我在 Nuxt 2.14.0 中运行的是什么版本的 Vue?

如何使用 JavaScript 按索引删除数组元素?

Leaflet+Vue+Vuetify / Leaflet map 隐藏 vuetify 弹出对话框

Laravel 和 Vue - handler.call 不是函数

如何在 vue.js 中通过单击事件发出值

在另一个 props 的验证器中访问 props 值