2019-10-04

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

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

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


猫派 / 基本インドア / ガジェット大好き / RDP推進派
コロナ禍の趣味はPC+VRでゲーム。
最近のゲーム:Factorio / BeatSaber / にゃんこ大戦争

→ Policy