4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Vue3] v-onでKeyCodeが非推奨になりました

Last updated at Posted at 2021-01-21

Vue2系では

<input @keyup.13="submit" />

のようにキーコードを指定してメソッドを発火させることができたのですが
同じことをVue3系でやろうとすると

'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. 
Using 'KeyboardEvent.key' instead  vue/no-deprecated-v-on-number-modifiers

Lintの設定によってはエラーになってしまいます。
これはkeyCodeが非推奨になったためです。

Vue3系ではキーコードを直接使用せずにエイリアスを使うことが推奨されています。
先程の例だとkeyCodeの13はenterの入力なので
以下のように書いてあげるとLintで怒られなくなります

<input @keyup.enter="submit" />

ちなみにエイリアスの記法はケバブケースになります

// GOOD
<input @keyup.page-down="submit" />

// BAD
<input @keyup.pageDown="submit" />

input type="number"でeを入力できないようにする

inputタグで数字だけを入力させたいためtypeをnumberにしましたが指数表記のeも入力できてしまいます

Vue2系であればeのキーコード69をpreventでもLintに怒られませんでしたがVue3では怒られてしまいます

<input type="number" @keydown.69.prevent>

そのため69ではなくeを使用するかメソッド内で数字を判定してあげる必要があります

<input type="number" @keydown.e.prevent>

// もしくは

<input type="number" @keydown="checkNumber">
...
methods: {
  checkNumber (input) {
    if (!input.key.match(/[0-9]/)) input.preventDefault()
  }
}
4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?