IE11+vue.js: doesn't work/fire

Question

A vue.js template containing this doesn't fire in IE11:

<input type="checkbox" v-on:input="blabla()">

blabla() is called in Firefox and Chrome - just not in IE11.

Why is that? See this codepen to reproduce. In IE11, you'll need the codepen debug view though, as the codepen editor is not supported in IE11.

Using vue 2.6.10, which today is the newest version.

score 3 · Accepted Answer · edited Jul 15 '22 at 22:01

IE doesn't fire an input event, but a change event for checkboxes. Firefox and chrome fire both. See this answer for more.

I've updated the codepen to show both v-on:input and v-on:change.

It does mean that the vue.js doc is a little incomplete. It says:

Remember that:

<input v-model="searchText">

does the same thing as:

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

But clearly that is not true for <input type="checkbox">.

(So I found the answer myself, I just wanted to record it here for the next poor guy who comes up against it.)

1 Answers1