current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 3 down vote favorite

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.

share|improve this question
up vote 5 down vote

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);
        }
    }
});
share|improve this answer
    
That's what I needed. – nix9 Jan 15 at 20:20
    
Then please mark this as the correct answer, thanks. – Gus Jan 16 at 11:59
    
how can I do that? – nix9 Jan 16 at 12:44
    
"To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in." That's the way stack overflow works: stackoverflow.com/help/someone-answers – Gus Jan 17 at 12:15
up vote 2 down vote

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.

share|improve this answer
    
I don't want this function in that component because it does something completely different. Template gets the users from database and show them. Then I want to create new conversation when I click on the button. – nix9 Jan 15 at 13:58
    
You can use events like in the other answer, or you can always access the root Vue instance using this.$root. So on your click event you could use $root.createConversation(player.id). I'd encourage you to try to structure your components so each component manages its own functionality, this is the best for re-usability and a core concept of Vue. – Jeff Jan 15 at 15:50
    
I want to structure my app. That's why I don't want to mix different functionality. – nix9 Jan 15 at 17:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.