Как настроить методы в компонентах vue.js?

Question

На этой странице

https://vuejs.org/v2/guide/events.html

Я могу настроить методы так:

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// you can invoke methods in JavaScript too
example2.greet() // => 'Hello Vue.js!'

, но если я создаю компонент, методы не работают

    Vue.component('ti-user-card', {
        data: function () {
            return {
                pEmail: "test@domain.com"
            };
        },
        template: '#vUserCard',
        methods : {
            mEmail : function(event) {
                window.location.href = "mailto:" + this.pEmail;
            }
        }
    });

html

<template id="vUserCard">
     <button v-bind:click="mEmail"> 
          Email 
     </button>
</template>

<div id="app">
    <ti-user-card></ti-user-card>
</div>

как я могу это исправить?

Спасибо

Answer 1

Используйте <button v-on:click="mEmail">A</button> вместо <button v-bind:click="mEmail">A</button>, потому что здесь вы обрабатываете событие, поэтому вы должны поставить v-on:click not v-bind:click или :click

v-bind:someAtt="property": свойство может бытьprops значение, объект данных или вычисляемое свойство

v-on:event="eventHandler": eventHandler - это метод