How to blur element when clicked in vue

Question

I am trying to fire the blur event on an element when it is clicked and surprisingly, was not able to find any examples online.

I originally tried this:

<a @click="this.blur">Click Me</a>

However, this obviously didn't work, and after doing some further reading, the above, turned into this:

<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>

This is most likely a very simple thing to achieve but I can't seem to find any documentation on firing events on the calling element.

What am I doing wrong with the above? Is there a simple, and inline, way of achieving what I need instead of using a method?

Answer 1

or like this:

<a class="button" @click="$event.target.blur()"> Click Me </a>

Answer 2

Try this:

<a class="button" @click="(e) => e.target.blur()"> Click Me </a>