43
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-03-24

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

43
17
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
43
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?