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>