true-value and false-value are ignored on initial render

[kas84]

Version

3.0.3

Reproduction link

https://codesandbox.io/s/hopeful-zhukovsky-yuxqi?file=/src/App.vue

Steps to reproduce

<template>
  <label>model {{model}}</label>
  <input type="checkbox" v-model="model" :true-value="false" :false-value="true" />
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    const model=ref(false)
    return {
      model
    }
  }
}
</script>

What is expected?

checkbox expected to be checked since model is false and true-value="false"

What is actually happening?

checkbox is not checked on first render

---

After you click it once, it actually works okay.

[edison1105]

I opened a PR,but I found that true-value and false-value are also not supported when v-model value is a Set or an Array.Is it designed like this?

[posva]

@edison1105 yes, that's normal. With sets and arrays, there should be a value attribute instead

[edison1105]

@edison1105 yes, that's normal. With sets and arrays, there should be a value attribute instead

Got it,Thanks~

[edison1105]

Hi @posva
I think this is not about inverted value. see https://codesandbox.io/s/fast-worker-k8q0e?file=/src/App.vue
I modified the code to see the problem more clearly.

[edison1105]

Because true-value or false-value is not assigned to the checkbox after first rendered.

[edison1105]

I think 48f00c0 is not fix this bug.

We should assign true-value or false-value to checkbox but setChecked is not do this after first render.

<div id="app">
  <label>model {{ model }}</label>
  <input type="checkbox" v-model="model" :true-value="11" :false-value="22" />
</div>

<script>
  const { ref,createApp } = Vue
  createApp({
    name: "App",
    setup() {
      const model = ref(false);
      return {
        model,
      };
    },
  }).mount('#app')
</script>

After first render,the model value is still false not 22.

And my PR is make it works fine.

[edison1105]

Hi @posva @yyx990803
I update demo https://codesandbox.io/s/fast-worker-k8q0e?file=/src/App.vue with lastest vue-next version 3.0.4.
This bug still happens.I think the model value should be 22 on initial render.

[yyx990803]

model should be the source of truth, not the template. If the user intends to provide an initial value that is neither true-value or false-value, the value should be left untouched.

This actually has nothing to do with true/false-value. e.g. if you have <input type="checkbox" v-model="model"> but model's initial value is 123, it will not be changed to false.

[edison1105]

model should be the source of truth, not the template. If the user intends to provide an initial value that is neither true-value or false-value, the value should be left untouched.

This actually has nothing to do with true/false-value. e.g. if you have <input type="checkbox" v-model="model"> but model's initial value is 123, it will not be changed to false.

OK