Buefyのb-selectで@inputイベントが2回走る問題
create: 2019-10-5
Buefy

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

けど、なんか納得いかない。