Calling functions inside Vue.js template

Question

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

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.

Answer 1

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

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

Answer 2

Your method should be in the component, not in your global Vue instance. All functions are called as this.createConversation behind the scenes, so it needs to be within the component that is the template for.