VUE 3“ V-Model”使用复选框，但数据是“ 1”。或“ 0”不是“ true”或“ false”

Question

由于后端的某些原因，他们使用0或1，而不是false或true的布尔人。

因此，当我尝试使用来自API的布尔数据时，TS抱怨：

// settings.crawl_on outputs 0 or 1
<input
 v-model=“settings.crawl_on”
 type="checkbox"
/>

我尝试添加以下代码也不起作用：

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

TS说：

（属性）inputhtmlattributes.checked？：not [] |设置|布鲁利亚人 键入'number'不能分配给'任何[] |设置| booleanish'.ts（2322）Runtime-dom.d.t.ts（629，3）：预期类型来自属性“检查”，该属性在类型上在此处声明 'ElementAttrs'

是否有一种方法可以覆盖此问题，或者有什么正确的用途？

Answer 1

从VUE 2升级到VUE 3，遇到了同样的问题。这无效：

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

但这有效：

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

Answer 2

因为静态HTML属性值是“字符串”类型。而且您期望“整数”。
因此，当您使用“ v-bind：”制作属性动态值时，您将发送'整数'

true-value="1" <-- string 
true-value="1" <-- integer
:true-value="'1'" <-- string

Answer 3

对于输入type =“复选框” <​​/code>，0将与false和1相同> true。

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

我使用typeScript以及JavaScript检查了相同的检查，并且在两种语言中都可以正常工作。

演示：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input
         v-model="settings.crawl_on"
         type="checkbox"
         />
</div>