Vue传递Boolean类型prop报错：预期布尔值却收到true/false字符串如何解决

报错原因 #

组件InternalTable的selectable属性定义为Boolean类型，你调用组件时写的selectable="true"没有加v-bind绑定符号，Vue默认会把引号内的内容解析为字符串，导致实际传入的是字符串"true"，和预期的布尔类型不匹配，触发类型校验失败报错。

修复方案 #

方案1：绑定固定布尔值 #

给selectable属性前添加v-bind缩写符号:，引号内的内容会被当作JS表达式解析，得到真正的布尔值：

<template>
  <div>
    <InternalTable :participants="participants" :selectable="true"></InternalTable>
  </div>
</template>

如果需要传入false，修改为:selectable="false"即可。

方案2：简写传true #

如果只需要传入固定值true，可以直接省略属性值，Vue默认会给这类空属性传布尔值true：

<template>
  <div>
    <InternalTable :participants="participants" selectable></InternalTable>
  </div>
</template>

方案3：动态绑定变量 #

如果需要动态控制selectable的状态，绑定一个布尔类型的响应式变量即可：

<template>
  <div>
    <InternalTable :participants="participants" :selectable="isSelectable"></InternalTable>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 可根据业务逻辑动态修改该变量的值
      isSelectable: true
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者cbln1