Vue Error: Expecting Boolean, but receive True/False String instead-CodePudding

I'm attempting to only render a component if value is true, however I'm receiving the following error:

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

I render the component as follows:

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

With the props inside that component looking like this:

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

I'm not sure how to better phrase that, so reaching out here for ideas om how best to fix this.

CodePudding user response：

You missed : or v-bind:selectable="true".

CodePudding user response：

this will solve your issue

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