vue.js reference div id on v-on:click

You can extend your event handler with the event object $event. That should fit your needs:

<div id="foo" v-on:click="select($event)">...</div>

The event is passed on in javascript:

export default {
    methods: {
        select: function(event) {
            targetId = event.currentTarget.id;
            console.log(targetId); // returns 'foo'
        }
    }
}

As mentioned in the comments, `$event` is not strictly necessary, when using it as the only parameter. It’s a nice reminder that this property is passed on, when writing it explicitly.

However, nobody will stop you from writing the short notation:

<div id="foo" @click="select">...</div>

Beware that the method will not receive the `$event` object when you add another parameter. You need to explicitly add it at the position you will handle it in the listener. Any parameter order will work:

<div id="foo" @click="select(bar, $event)">...</div>

To find more options of the v-on directive, you can look through the corresponding entry in the vue documentation:

Vue API Documentation – v-on

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)