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:
をつける必要がありました。