【Vue.js】 v-on:clickでイベントを呼んだ際に要素からフォーカスアウトしたい。

Question

現在、HTMLをVue.jsを使用して書き換えている最中なのですが、
jQueryで出来ていたフォーカスアウトが、Vue.jsではやり方が分かりませんでした。

下記現在のコードです。

new Vue({
    el: '#app',
    data: {
        test: "test"
    },
    methods: {
        openModal: function (event) {
            $(this).blur(); // これをどうにか実行したい 
        }
    }
})

<div id="app">
    <button v-on:click="openModal">モーダルを開く</button>
</div>

---

なぜフォーカスアウトしたいかの根本的背景としては、
v-on:clickで設定したモーダルを開くイベントで、フォーカスアウトしないと
Enterキーを押した際に何重にもモーダルが開かれてしまう　ためです。

元々jQueryでは以下のように書いていました。

$('.open-modal').on('click',function(){
    $(this).blur();
    // モーダルを開く処理
});

---

Vue.jsで指定した clickイベントで、jQueryでやっていたようなフォーカスアウトは実現できるのでしょうか。

お時間ある方で、知識をお持ちの方いらっしゃいましたらご助力頂けますと幸いです。

Answer 1

openModal: function (event) {
    $(event.currentTarget).blur();
}