Sometimes, we want to get the element that is being called by an event with Vue.js

In this article, we’ll look at how to get the element that is being called by an event with Vue.js.

How to get the element that is being called by an event with Vue.js?

To get the element that is being called by an event with Vue.js, we can use the e.target property in the event handler.

For instance, we write

<template>
  <div>
    ...
    <li @click="onClick">Trigger a handler</li>
    ...
  </div>
</template>

<script>
export default {
  methods: {
    onClick(e) {
      const clickedElement = e.target;
    },
  },
};
</script>

to set the click event handler to onClick with @click="onClick".

Then we get the element that’s clicked in onClick with the e.target property.

e is the event object that’s set when we click on the element.

Conclusion

To get the element that is being called by an event with Vue.js, we can use the e.target property in the event handler.