Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1. Bind a non-boolean, truthy value to a checkbox using v-model
2. Observe that the checkbox is, in fact, not checked

What is expected?

v-model, at least in Vue 2, used to work fine with checkboxes using truthy and falsy values instead of strict boolean values. So I would expect this behavior to continue in Vue 3, especially since this isn't listed as a breaking change, which it definitely is.

What is actually happening?

Vue only checks the checkbox if the corresponding v-model has the boolean value of true. It ignores all else.

Case in point, I am working with an API that returns boolean-like values as 0/1 instead of true/false, for reasons of SQL. This was never an issue with Vue 2. I am aware of the true-value and false-value attributes but that shouldn't be necessary... right?

not only checkbox but also radio has this same problem too.

function setChecked(
  el: HTMLInputElement,
  { value, oldValue }: DirectiveBinding,
  vnode: VNode
) {
  // store the v-model value on the element so it can be accessed by the
  // change listener.
  ;(el as any)._modelValue = value
  if (isArray(value)) {
    el.checked = looseIndexOf(value, vnode.props!.value) > -1
  } else if (isSet(value)) {
    el.checked = value.has(vnode.props!.value)
  } else if (value !== oldValue) {
+    // maybe we should cast `value` to boolean
    el.checked = looseEqual(value, getCheckboxValue(el, true))
  }
}

Hi, I create a PR #5780 to fix this issue

I would say you need to use true-value

So, any update on this?