Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkbox shows checked when v-model is false #2638

Closed
loki0609 opened this issue Apr 8, 2016 · 3 comments
Closed

Checkbox shows checked when v-model is false #2638

loki0609 opened this issue Apr 8, 2016 · 3 comments

Comments

@loki0609
Copy link

loki0609 commented Apr 8, 2016

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

@Twiknight
Copy link

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

@yyx990803
Copy link
Member

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/

@jomofrodo
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants