Buefyのb-selectで@inputイベントが2回走る問題
Buefy
のb-select
使っていたときのこと。
<b-select @input="input">
<option value="1">1
<option value="2">2
</b-select>
methods:{
input(val) {
console.log('selected', val)
}
}
こうやって選択後の value を待ち構えていたら、イベントハンドラが2回コールされる。
しかも2つとも引数が違う。
こんなの ↓
selected Event {isTrusted: true, type: "input", target: select, currentTarget: select, eventPhase: 2, …}
selected 1
イベントと値、2種類の引数で2回呼ばれる
なんじゃそりゃ。
githab の当該ソースみたら、 select
本体にv-bind="$attrs"
しているので、ブラウザの標準input
イベントも一緒に飛んでくることになってる。
つまり、ブラウザのselect
のデフォルト挙動がinput
イベントでイベントオブジェクトを返すようになってる。
防げない。
あとからb-select
の方でもう一回input
イベントをvalue付きでエミットしてくれてる。
ちなみに IE11 と Edge では発生せず。
なんだそりゃ。
場当たり的対応
欲しいのはイベントじゃなくて value なので、引数の型を判定すればいい。
methods:{
input(val) {
if(typeof val === 'string') {
console.log('selected', val)
}
}
}
けど、なんか納得いかない。