带有复选框的 Vue 3“v-model”,但数据为“1”或“0”而不是“true”或“false”

分享于2022年07月17日 checkbox v-model vue.js 问答
【问题标题】:带有复选框的 Vue 3“v-model”,但数据为“1”或“0”而不是“true”或“false”(Vue 3 "v-model" with checkboxes but the data is "1" or "0" not "true" or "false")
【发布时间】:2022-06-13 09:11:54
【问题描述】:

由于后端的某些原因,它们使用 0 或 1 而不是 false 或 true 作为布尔值。

所以,当我尝试使用 API 中的布尔数据时,TS 抱怨:

// settings.crawl_on outputs 0 or 1

我尝试添加下面的代码它也不起作用:

true-value="1"
false-value="0"

TS 说:

(property) InputHTMLAttributes.checked?: any[] |设置 |布尔语 类型 'number' 不可分配给类型 'any[] |设置 | Booleanish'.ts(2322)runtime-dom.d.ts(629, 3):预期的类型来自属性 'checked',它在 type 上声明 '元素属性'

有没有办法覆盖它或正确的用途是什么?

  • 你可以提供一个用 getter 和 setter 来计算数字和布尔值的方法

【解决方案1】:

对于输入 type="checkbox" 0 将与 false 相同, 1 将与 true 相同。

因此, settings.crawl_on = 1 将与 settings.crawl_on = true 相同。

我对@9​​87654328@ 和 JavaScript 进行了检查,这两种语言都可以正常工作。

演示

new Vue({
  el: '#app',
  data: {
    settings: {
        crawl_on: 1
    }
  }
})

  • 感谢您的回复。我的错。我忘了提到它是一个 Vue3 应用程序,它会抱怨。