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()
}
}