Subscribe on changes!

Inputs ignore model value if it remains unchanged

avatar
Dec 1st 2020

Version

3.0.3

Reproduction link

https://jsfiddle.net/gqzdsctr/

Steps to reproduce

  1. Open reproduction link
  2. 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/

avatar
Dec 1st 2020

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')