vue.js

Vue.jsのpropsでBooleanを渡そうとしたときの型エラー

Vue.jsのpropsでBooleanを渡そうとしたときに詰まったのでメモ。

<script>
export default {
  props: {
    isRequired: {
      type: Boolean,
      default: false,
    }
  },
};
</script>

このようなpropsを定義して以下のように値を渡しました。

input is-required="true"

しかし、Vue.jsにはStringとして受け取られ、

[Vue warn]: Invalid prop: type check failed for prop "isRequired". Expected Boolean, got String.

のようにエラーになってしまいます。

正しくは、

input v-bind:is-required="true"

または、

input :is-required="true"

のように v-bind: をつける必要がありました。