Buefyのb-selectで@inputイベントが2回走る問題

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

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

Subscribe to 猫好きが猫以外のことも書く

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe