How to set up methods in vue.js components?

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: "[email protected]"
            };
        },
        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

You need to use v-on:click or @click.

Husam Elbashir
– Husam Elbashir

2018-10-16 21:56:30 +00:00
Commented Oct 16, 2018 at 21:56 — Husam Elbashir
– Husam Elbashir, Commented Oct 16, 2018 at 21:56

Boussadjra Brahim · Accepted Answer · 2018-10-16 22:02:25Z

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

edited Oct 16, 2018 at 22:02

answered Oct 16, 2018 at 21:56

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set up methods in vue.js components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related