Vue: Checkbox shows checked when v-model is false

Created on 8 Apr 2016  ·  3Comments  ·  Source: vuejs/vue

I started down this path because @click fired before the v-model is updated (example here: http://jsfiddle.net/5sH6A/308/ )
so I didn't know what the value was. I thought I'd try my logic in a watch: function but found the issue below.

Vue.js version

1.0.16

Reproduction Link

http://jsfiddle.net/5sH6A/303/

Steps to reproduce

Click the checkbox and choose cancel

What is Expected?

Checkbox should be empty

What is actually happening?

Checkbox shows checked while the bound data is false

Most helpful comment

Very late to this party -- but still a live issue for me after all these years. My solution:
When using a checkbox input with v-model, use onchange @change handler. Will work for both IE and reasonable browsers.

Strangely, if you use a v-model checkbox and @click, the value of your v-model attribute (e.g., "flgChecked") will be reversed in the Chrome/Firefox click handler. That is to say, it will be false when you have just clicked the checkbox to the on position, true when you have clicked it to the off position. So -- reversed. But IE actually reports "correctly". So . . . use @change.

Or maybe I am just missing something.

All 3 comments

This seems to be about compatibility.
It works quite well with Edge 12 and IE11 on Windows 10, but breaks with chrome 49.0.2623.110
It also breaks with firefox 41 on open suse leap

Setting the same value inside a watcher is always a bad idea...

I'd say the easiest way to deal with this is simply not using v-model. You are trying to control the value yourself anyway: http://jsfiddle.net/yyx990803/5sH6A/310/

Very late to this party -- but still a live issue for me after all these years. My solution:
When using a checkbox input with v-model, use onchange @change handler. Will work for both IE and reasonable browsers.

Strangely, if you use a v-model checkbox and @click, the value of your v-model attribute (e.g., "flgChecked") will be reversed in the Chrome/Firefox click handler. That is to say, it will be false when you have just clicked the checkbox to the on position, true when you have clicked it to the off position. So -- reversed. But IE actually reports "correctly". So . . . use @change.

Or maybe I am just missing something.

Was this page helpful?
0 / 5 - 0 ratings