# Vue.jsのinputイベントがselectタグで発火しない(Internet Explorer 11)原因と対応
Internet Explorer 11において、Vue.jsのinputイベントがselectタグで発火しない。
# 原因
Vue.jsの問題ではなく、Internet Explorer 11では、次のように記述してもselectタグでinputイベントが発火しない。(ChromeやFirefoxでは発火する)
<select @input="updateValue">
# 対応
@inputではなく@changeを使用すればよい。
<select @change="updateValue">
# v-modelはv-bind:valueとv-on:inputの組み合わせと等価とは限らない
以前v-modelは:valueと@inputイベントを組み合わせたものと等価という記事を読んだことがあった。
しかし、公式サイトにはv-modelがtextやselect、radioによって異なるイベント、値を使うことが記載されている。
v-model は、内部的には input 要素に応じて異なるプロパティを使用し、異なるイベントを送出します:
テキストと複数行テキストは、value プロパティと input イベントを使用します
チェックボックスとラジオボタンは、checked プロパティと change イベントを使用します
選択フィールドは、value プロパティと change イベントを使用します
https://jp.vuejs.org/v2/guide/forms.html (opens new window)
つまり、textの場合、たしかにv-modelは:valueと@inputを組み合わせたものと等価だ。
<input type=text v-model="message">
⇅この2つは等価
<input
:value="message"
@input="message = $event.target.value"
>
しかし、selectの場合は@inputではなく@changeと等価ということ。
よってselectやradioで独自のコンポーネントを作る際は@inputイベントではなく、@changeイベントを指定するべきだ。
<select v-model="selected">
⇅この2つは等価
<select
:value="selected"
@change="selected = $event.target.value"
>
・参考
https://github.com/vuejs/vue/issues/4701 (opens new window)