Vue 错误：期待布尔值，但收到 True/False 字符串答案

【问题标题】：Vue Error: Expecting Boolean, but receive True/False String insteadVue 错误：期待布尔值，但收到 True/False 字符串
【发布时间】：2021-10-07 21:31:09
【问题描述】：

我试图仅在值为 true 时渲染组件，但是我收到以下错误：

  Vue warn]: Invalid prop: type check failed for prop "selectable". Expected Boolean, got String with value "true / false".

我将组件渲染如下：

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

该组件内的道具如下所示：

    export default {
  props: {
    participants:
        {
          type: Array,
          default: null
        },
      selectable: {
        type: Boolean,
        default: true
      }
  },

我不确定如何更好地表达这一点，因此请在此处寻求解决此问题的最佳方法。

【问题讨论】：

如果你想让 Vue 将 prop 值解释为 Javascript 而不是简单的字符串，你需要使用 v-bind:selectable="true" 或 :selectable="true" 而不仅仅是 selectable="true" （它总是被解释为字符串值）
vuejs.org/v2/guide/components-props.html#Passing-a-Boolean

标签： vue.js vuejs2 vue-component

【解决方案1】：

您错过了: 或v-bind:selectable="true"。

【讨论】：

【解决方案2】：

这将解决您的问题

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

【讨论】：