Vue 错误：需要布尔值，但收到 True/False 字符串

Question

我尝试仅在值为 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
      }
  },

我不知道如何更好地表达这个问题，所以请在这里寻求如何最好地解决这个问题的想法。

Answer 1

您错过了

:

或

v-bind:selectable="true"

。

Answer 2

这将解决您的问题

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

Answer 3

正确的代码应该如下

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

<script>
export default {
  props: {
    participants: {
      type: Array,
      default: null
    },
    selectable: {
      type: Boolean,
      default: true
    }
  }
}
</script>

:selectable="true"：冒号：是 v-bind 的简写