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.

try <button type="button" v-on:click='handler($event)'>handle this</button> — Bindrid
– Bindrid, Commented Mar 20, 2018 at 4:09
Have you tried logging arguments inside handler to see what's coming in? — connexo
– connexo, Commented Mar 20, 2018 at 4:11

Daksh M. · Accepted Answer · 2018-03-20 04:14:54Z

2

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:

answered Mar 20, 2018 at 4:14

Daksh M.

4,8094 gold badges35 silver badges47 bronze badges

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

Comments

roberto tomás · Accepted Answer · 2018-03-20 04:09:23Z

-1

Try it like this

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

answered Mar 20, 2018 at 4:09

roberto tomás

4,7477 gold badges47 silver badges87 bronze badges

1 Comment

connexo Over a year ago

There's too many reasons to -1 this, starting with Try it like this...

Collectives™ on Stack Overflow

Vue.js - Accessing the event in the handler

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related