Inputs ignore model value if it remains unchanged
Version
3.0.3
Reproduction link
https://jsfiddle.net/gqzdsctr/
Steps to reproduce
- Open reproduction link
- Click on checkbox
What is expected?
The checkbox should remain unchecked since it's model value is false.
What is actually happening?
The checkbox gets checked.
To get the expected behavior I had to temporarily change the value and set it back inside a nextTick
as shown in this fiddle:
https://jsfiddle.net/1tpb8ayu/
By setting the value to false
, you are not changing it, resulting in the checkbox being checked by the browser but Vue not updating anything. If you set the initial value to 0 you will see the checkbox remains unchecked.
You need to force the element value in this specific scenario:
const app = Vue.createApp({
setup() {
const sourceOfTruth = Vue.ref(false);
const cb = Vue.ref()
const vm = Vue.getCurrentInstance()
const model = Vue.computed({
get() {
return sourceOfTruth.value
},
set() {
sourceOfTruth.value = false
cb.value.checked = false
}
});
return {model, cb }
}
})
app.mount('#app')