如何在 vue.js 组件中设置方法？

Question

On this page

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

I can set up methods like so

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!'

but if I make a component, the methods don't work

    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>

how can I fix this?

Thanks

Answer 1

Use <button v-on:click="mEmail">A</button> instead of <button v-bind:click="mEmail">A</button> because here you're handling an event, so you have to put v-on:click not v-bind:click or :click

v-bind:someAtt="property" : property could be a props value, data object or computed property

v-on:event="eventHandler" : eventHandler is a method