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

Question

Using v-on:click I'd like to set a variable with the id of the div in Vue.JS - how do I reference this?

<div id="foo" v-on:click="select">...</div>

<script>
    new Vue({
        el: '#app',
        data: {
        },
        methods: {
            select: function(){
                divID = this.id // ??
                alert(divID)
            }
        }
    })
</script>

Answer 1

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

Answer 2

Inspired by @nirazul's answer, to retrieve data attributes:

HTML:

<ul>
    <li
            v-for="style in styles"
            :key="style.id"
            @click="doFilter"
            data-filter-section="data_1"
            :data-filter-size="style.size"
    >
        {{style.name}}
    </li>
</ul>

JS:

export default {
    methods: {
        doFilter(e) {
            let curTarget = e.currentTarget;
            let curTargetData = curTarget.dataset;
            if (curTargetData) {
                console.log("Section: " + curTargetData.filterSection);
                console.log("Size: " + curTargetData.filterSize);
            }
        }
    }
}