Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Checkbox doesn't have it's checked state set via v-model if the click event is prevented

See original GitHub issue

Version

2.6.6

Reproduction link

https://jsfiddle.net/s4ub8dnc/3/

Steps to reproduce

I have a checkbox which needs to get it’s checked state from a VueX store, but I also need to be able to determine whether or not shift was being held when the checkbox was clicked. To do this I’m using @click.prevent on the checkbox (so that I have the event being passed to the method) and then using v-model to determine the checked state.

However, regardless of whether or not the v-model value is true or false, the checkbox never gains the checked state if the click is prevented. It seems that there is still a reliance on the click event in order to set the state.

What is expected?

I would expect the checkbox to be checked if the v-model value is set to true, regardless of how the checkbox arrived at that state - by something else setting it to true, or by the click handler setting it.

What is actually happening?

The click binding having .prevent on it stops the checkbox from receiving it’s checked state, even when the v-model value is true

The reason why I haven’t just used a setter in the computed is because the setter doesn’t get given the click event, so I can determine whether or not shift was being held at the point of clicking the checkbox.

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:21 (8 by maintainers)

Top GitHub Comments

6reactions

LinusBorgcommented, Feb 22, 2019

As far as I’m aware there’s no other documented method of setting the checked state other than v-model.

What about this?

<input type="checkbox" v-bind:checked="selected" @change="handleChange">

Good old v-bind and v-on.

The problem with this argument is that if you implement the exact same behaviour in pure JS, it works:

Actually, your example here uses the change event, which is why it works. If you change your “vanilla js” examle to use the click event, like you did in the original code, it doesn’t work:

https://jsfiddle.net/Linusborg/qr2j9x4g/

So I’d argue the behaviour you are seeing with Vue 2.6 now is 100% in line with vanilla JS behaviour.

3reactions

jsbaguettecommented, Feb 21, 2019

https://jsfiddle.net/rwe2t04h/8/

I used setTimeout that will be execute right after all micros task will be execute.

Work for me. I think it’s because of the window.confirm that is a browser script and it execute immediately so i think the dom refresh update time is before the window.confirm that’s weird to me. I think something missing here

Top Results From Across the Web

Setting a checkbox as checked with Vue.js - Stack Overflow

To set the state of the checkbox, you need to bind the v-model to a value. The checkbox will be checked if the...

Conditionally Prevent Checkbox Change - Vue Forum

I want a user to click a checkbox and in some states, have it update v-model as normal. But in other states check...

event.preventDefault does not always prevent what you might ...

When it comes to React, on each rerender, the checked attribute will reflect the current state, but it's still only a default value...

Vue conditional rendering: editing existing todos

To do that, we'll need to first define it inside our data() property. The "Delete" button, when clicked, will delete the todo item...

Form Input | Components - BootstrapVue

<template> <div> <b-form-input v-model="text" placeholder="Enter your ... If the type prop is set to an input type that is not supported (see above), ......