frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【Vue.js 】keyup.enterとblurを同じ要素にいれる方法

スポンサードリンク


スポンサードリンク


# 【Vue.js 】enterとblurを同じ要素に登録しても無限地獄にならない方法


stackoverflowに助けられたので日本語版として残しておきます。

仕様


input要素にフォーカスアウトしたときと、enterキー押したときにアラートを出したい。

実装 (誤り)

<div id="app">
<input type="text" @blur="alert" @keyup.enter=" alert ">
</div>
new Vue({
  el: '#app',
  methods: {
    alert: function() {
      alert()
    }
  }
})

エラー

上記実装だとenterキーを押してalertが表示され、alertを消すときblurが発動しまたalertが表示されます。
この後どういうわけか何度アラートを消してもアラートは表示し続けます。

解決法

解決法は@keyup.enterに $event.target.blur()を入れます。
enterでblurを呼び出すことでアラートの繰り返し防ぎます。

<div id="app">
<input type="text" @blur="alert" @keyup.enter="$event.target.blur()">
</div>


See the Pen
MWgyoQg
by funclur (@funclur)
on CodePen.