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

vue get id of clicked element
vue v-on
v-on:click not working
vue v-on:input
vue get element by id
v-on load
vue click inline function
vue v-on:change

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>

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

Event Handling, For example: <div id="example-1"> <button v-on:click="counter += 1">Add 1</​button> <p>The button above has been clicked {{ counter }} times.</p> </div> Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

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

Methods and Event Handling, This is a variation on some of the examples given in the Vue.js introduction. I found one example in the documentation that maybe kinda sorta explained it called v-bind:pointertolist="arrayMember" v-bind:key="arrayMember.id" this one works --> <div v-on:click="toggleDisplay"> <button-toggle> This  In this article, we’ll look at how to handle various events with Vue.js and modify an event handler’s behavior. We can use the v-on directive to listen to DOM events and run some JavaScript

Just to highlight another option than the selected answer for the same question, I have a delete button on a record and want to perform an action with the record's unique id (a number). I could do the selected answer as before:

<button :id="record.id" @click="del">&times;</button>

This leaves the unfortunate reality that my del function needs to pull the id attribute out of the javascript event, which is more about the API (the DOM) than my domain (my app). Also using a number as an element id isn't ideal and could cause a conflict if I do it more than once in a view. So here's something that's just as clear and avoids any future confusion:

<button @click="()=>del(record.id)">&times;</button>
methods: {
  del(id) {
    fetch(`/api/item/${id}`, {method:"DELETE"})
  }
}

You see, now my del function takes the record id instead of an event, simplifying things.


Note that if you do this wrong, you will invoke your delete function immediately, which is not what you want. Don't do this:~~

<button @click="del(record.id)">&times;</button>

If you end up doing that, Vue will call the del function every time this html fragment is rendered. Using the anonymous function ()=>del(record.id) will return a function that's ready to be executed when the click event happens.

Actually @nirazul proved this is fine. Not sure what my issue was.

How to access a method in Root from using v-on:click , 1 2 3 4, <div id="demo"> <a v-on="click: onClick">Trigger a handler</a> <a v-on=​"click: n++">Trigger an expression</a> </div>  Order matters when using modifiers because the relevant code is generated in the same order. Therefore using v-on:click.prevent.self will prevent all clicks while v-on:click.self.prevent will only prevent clicks on the element itself. New in 2.1.4+ <!-- the click event will be triggered at most once --> < a v-on:click.once = "doThis" > </ a >

Listening for Events, <div id="components-demo"> <button-counter></button-counter> If Vue didn't have this rule, clicking on one button would affect the data of all other instances, like below: You clicked me Above, you'll see that we can use v-bind to dynamically pass props. Caught a mistake or want to contribute to the documentation? Vue.Js get element by id Previous. Vue.js scroll to bottom of div . Vue.Js Scroll to bottom of Page . Vue.Js Call function on Page Load . Vue.Js Trim String .

Components Basics, I got a list of users which are displayed with v-repeat . HTML: <ul id="vue"> <li v-​repeat="user in users" v-on="click: onClick(user)">@{{  Vue.js is a progressive JavaScript framework created by Evan You and the Vue core team, with contributions from 230-plus open source community lovers. Vue is used by more than 870,000 projects and has been starred 140,000 times on GitHub.

Access corresponding DOM element onClick() in v-repeat item , <div id="app"> <button v-on:click="clickHanlder"></button> </div> new Vue({ el: "​#app", methods: { clickHandler () { console.log("You clicked  Listening for Events You can use the v-on directive to bind event listeners to DOM events. It can be bound to either an event handler function (without the invocation parentheses) or an inline expression.

Comments
  • Thanks. it would seem you don't need to include '($event)' in the v-on statement and it still works.
  • 'event.currentTarget' isn't mentioned in the VueJS docs - where is this information from? Asking so I can find other functions!
  • While this is correct, I would advise against it. The reason behind this (besides making it explicit): You can pass any number of parameters and the behaviour would break for other signatures like: select(number, event)
  • The event object is a web standard: MDN - Event. If this answer helped you, consider accepting it :)
  • Just add the $event wherever you want it: @click="select(bar, $event)" or @click="select($event, bar)"
  • Why making the detour if you can just do @click="doFilter(style)" directly?
  • @nirazul, I altered the example to demonstrate how I passed data attributes. In my real example, many additional arguments (which does not only include style) are there. I'll edit the answer to make it more obvious.
  • This is simply not true, functions in event arguments won't be immediately executed when the template renders: codepen.io/nirazul/pen/pYJbKd?editors=1010