Vue: IE11 <select @input="..."> not firing on selection change

[bhoop]

Vue.js version

2.1.8

Reproduction Link

https://fiddle.jshell.net/b9re3psg/

Steps to reproduce

1. Use Internet Explorer 11:
2. Change the selection of the <select> field next to "Won't fire" from 2016 to 2017

What is Expected?

The test() method will be called (which fires off an alert()).

What is actually happening?

Nothing (in Internet Explorer 11). In Chrome and Firefox the test() method is triggered as expected.

[yyx990803]

This actually has nothing to do with Vue, it's simply how IE11 behaves: https://fiddle.jshell.net/b9re3psg/1/

[danieldiekmeier]

I had to look around for a while to find and solve this issue. Can we add this to the docs? How is it solved with v-model?

[nirazul]

I might be missing something, but... what about using change event instead of input? Do you really require input?

[danieldiekmeier]

@Nirazul Yes, that's what I did now. But from the docs about form input components I assumed that v-model is _always_ syntactical sugar for :value / @input. But on <select> elements, this seems to not be the case.

As I said, it's working for me now, I just thought that maybe you can make this more obvious for future people with the same kind of problems.

[znck]

With v2.2+ you can use any event with v-model (checkout model option)

[nirazul]

@danieldiekmeier
Your statement is totally correct, v-model is always syntactical sugar for :value / @input.
It's only that IE11 doesn't fire an input event like other browsers do.

[danieldiekmeier]

@Nirazul But using v-model on <select> elements works in IE 10/11! (I tried that yesterday when I was debugging my problem.)

[nirazul]

@danieldiekmeier Oh... 👯

[nirazul]

@danieldiekmeier
You're right, it's in the code

[danieldiekmeier]

But I looked around a bit where this information could be put, but am not sure there actually is a place. Probably it was just my own mistake, because it really has nothing to do with Vue. I'm fine if we just put this to rest now. 💃

[vedmant]

Yeah, it's not obvious that @input will not work on IE11 as if v-model is just a syntax sugar for @input (to update value), I think it have to be said in docs that v-model also handles browsers compatibility better.

[campbellwmorgan]

+1 on this. Coming from a React background where browser quirks like this are handled behind their fixed API this was a particularly frustrating behaviour to come across. I think that a good solution would either/both be:

• clear documentation on this page https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events explaining how selects operate differently to inputs on certain browsers
• a low-level synthetic event eg update that works across all field types ie select & input etc

[zifnab87]

I was able to make it work with v-model.lazy in IE11. According to the documentation this uses change event instead of input.. I couldn't make it fire with @change and :value instead of v-model.. It is not stated anywhere that this would work with IE11. Also keep in mind b-form-select doesn't work with v-model.lazy unfortunately..