Linked Questions

Popular Questions

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"}]"="">

Component Error

If I pass in an empty array, the component renders, mounted() fires as expected, and dumps the empty array to console.

Component Success

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.

Related Questions