I am getting odd unexpected behavior that I can't seem to find a solution for, and this is the second time it has happened.
Whenever I try to pass Laravel data to a Vue component via props, instead of assigning the value to the prop, it seems to dump the data out to the DOM, and then the component never renders.
In a .vue single file component, I define my props like so:
props: {
businesses: {
type: Array,
required: true
},
},
In my Laravel Controller, I have the data like so
$a = new \stdClass();
$a->name = 'tester';
$a->id = 5;
$a->desc = "This is getting a bit ridiculous now";
$b = new \stdClass();
$b->name = 'Boo ya';
$b->id = 2;
$b->desc = "Certainly really annoying to me";
$testStuff = [$a, $b];
return view(
"businessListing",
compact('testStuff')
);
In my Laravel Blade template, I have my component setup like this:
<business-listing :businesses="@json($testStuff)"></business-listing>
Also tried this, even though should be the same, and it provided same result.
<business-listing :businesses="{!! json_encode($testStuff) !!}"></business-listing>
Then instead of the component being rendered, I see a mashed up version of the json string, the mounted() function never fires, but also no errors in console.
":"tester","id":5,"desc":"this="" is="" getting="" a="" bit="" ridiculous="" now"},{"name":"boo="" ya","id":2,"desc":"certainly="" really="" annoying="" to="" me"}]"="">
If I pass in an empty array, the component renders, mounted() fires as expected, and dumps the empty array to console.
Has anybody else run into this? I cannot figure out what is wrong for the life of me. I should mention - Laravel 5.7/PHP 7.1, Vue 2.5.17. Thanks for your help.