Nono.MA

[Solved] Type check failed for prop. Expected Array, got String with value

DECEMBER 20, 2021

I came across this error when trying to pass a JSON object from Laravel to a Vue component.

[Vue warn]: Invalid prop: type check failed for prop "myProperty". Expected Array, got String with value...

You may have passed a stringified JSON object which Vue is not parsing as an Array.

In my case, the error was I wasn't binding a property but passing a raw String that was meant to be evaluated by Vue as a JavaScript expression.

I was defining properties in Laravel PHP.

$collection = Post::all();
$numbers = [1,2,3];

Then passing them with the Blade templating syntax to my Vue component.

<issue-cover
  v-bind:collection="{!! $collection->toJson() !!}"
  my-numbers="{!! $numbers !!}"
><\/issue-cover>

As you can see, my-numbers is not using the v-bind:property-name or :property-name (a short-hand to the former) syntax. That was all I had to do to solve this issue on my end.

<issue-cover
    v-bind:collection="{!! $collection->toJson() !!}"
    v-bind:my-numbers="{!! $numbers !!}"
><\/issue-cover>

CodeVueLaravel