Vue: Checkbox shows checked when v-model is false
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
loki0609
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
Twiknight
on 8 Apr 2016
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/
yyx990803
on 8 Apr 2016
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.
jomofrodo
on 19 Sep 2019
Related issues
paceband
·
3Comments
guan6
·
3Comments
paulpflug
·
3Comments
franciscolourenco
·
3Comments
wufeng87
·
3Comments
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.