Vue.js - Accessing the event in the handler

Question

I am following vue.js tutorial - method event handlers

    <button v-on:click='handler'>handle this</button>
    .
    .
    .
    methods: {
                handler: function (event) {                
                   console.log(JSON.stringify(event));
              }}

However when I try to display the event all i get is {"isTrusted":true}

When I tried console.log(event.target.tagName) I get an empty string.

I think I am supposed to get Button.

Answer 1

Here's a codepen which I created.

My Vue Instance looks like:

new Vue({
    el: '#app',
    methods: {
        greet: (e) => {
            console.log(e.target.tagName);
        }
    },
})

and my html looks like this:

<div id="app">
    <button @click="greet">Yo, I'm a button</button>
</div>

and when i see the console, it looks like this:

Answer 2

Try it like this

v-on:click="handler($event)"