Vue+Element-UIのinputで@keyup.enter.nativeは日本語変換でも発火する
概要
Vue.js+Element-UIで作っていたformのinputで、Enterを押したらsubmitを発火するようにしたくて、@keyup.enter.nativeを使った。
<el-input-number
v-model="value"
placeholder="値"
clearable
size="small"
style="width: 150px;"
@keyup.enter.native="onEnter">
これでオーケーかと思いきや、
@keyup.enter は日本語変換でも発火してしまった。
以下の記事によると、 [Vue.js] 日本語変換の確定でkeyup.enterが発火してしまうのを防ぐ - Qiita
@keypress でフラグを立てるようにするとのこと。
element-uiだったので @keypress.native を使った。
また、submitは他のformのselectなどでも使っていたので、selectの@changeでもフラグを変える必要があった。
直接formのinputを使えば問題なかかもしれないが、 jsが動かない状態でもformが発火してしまうのを防ぎたかった。
===== 追記 ======
よく考えたら @keyup.enter.native を @keypress.enter.native にすればいいだけの話だった。
ただ、@keypressだと値が未確定で0とか入っちゃうことがあるので、そういう場合はflagを使うようなことが必要になる。
日本語変換めんどうくさい。
その場合は、以下にあるようにkeydown or keyupとkeypressの組み合わせのフラグを用意する必要がありそう。。。
