I've been attempting to trigger the blur event on an element when it is clicked, but I haven't been able to locate any helpful examples online.
My initial approach looked like this:
<a @click="this.blur">Click Me</a>
Unfortunately, this method didn't work. After some additional research, my code evolved into the following:
<template>
<!-- Button -->
<a class="button" @click="blur">
<slot></slot>
</a>
</template>
<script>
export default {
methods: {
/**
* Blur the specified element.
*
* @return void
*/
blur (event) {
event.target.blur();
}
}
}
</script>
While achieving this task may be straightforward, I still can't seem to find any proper guidance on triggering events on the calling element.
What am I missing in the above code? Is there a simpler and more direct way to accomplish what I need without using a method?