title: Calling functions inside Vue.js template
body: <p>My template:</p>
  
  <pre><code>&lt;template id="players-template" inline-template&gt;
          &lt;div v-for="player in players"&gt;
              &lt;div v-bind:class="{ 'row': ($index + 1) % 3 == 0 }"&gt;
                  &lt;div class="player col-md-4"&gt;
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading"&gt;
                              &lt;h3 class="panel-title"&gt;
                                  &lt;a href="#"&gt;{{ player.username }}&lt;/a&gt;
                                  &lt;span class="small pull-right"&gt;{{ player.createdAt }}&lt;/span&gt;
                              &lt;/h3&gt;
                          &lt;/div&gt;
  
                          &lt;div class="panel-body"&gt;
                              &lt;img v-bind:src="player.avatar" alt="{{ player.username }}" class="img-circle center-block"&gt;
                          &lt;/div&gt;
                          &lt;div class="panel-footer"&gt;
                              &lt;div class="btn-group btn-group-justified" role="group" aria-label="..."&gt;
                                  &lt;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)"&gt;&lt;span class="glyphicon glyphicon-envelope"&gt;&lt;/span&gt;&amp;nbsp;&lt;/a&gt;
                                  &lt;a href="#" class="btn btn-primary btn-info" data-toggle="tooltip" data-placement="bottom" title="Pokaż profil"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;&amp;nbsp;&lt;/a&gt;
                                  &lt;a href="#" class="btn btn-primary btn-primary" data-toggle="tooltip" data-placement="bottom" title="Zobacz szczegółowe informacje o poście"&gt;&lt;span class="glyphicon glyphicon-option-horizontal"&gt;&lt;/span&gt;&amp;nbsp;&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/template&gt;
  </code></pre>
  
  <p>My script:</p>
  
  <pre><code>new Vue({
      el: 'body',
      methods: {
          createConversation: function(id) { 
              console.log("createConversation()");
              console.log(id);
          }
      }
  });
  </code></pre>
  
  <p>When the template is rendering i gets an error <code>[Vue warn]: v-on:click="createConversation" expects a function value, got undefined</code>. I don't know how to use methods inside a component template. If someone could help me I would appreciate is.</p>