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

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);
            }
        }
    }
}