When Passing Data Via Props From Laravel, Vue Component Not Rendering, Dumping Data

Question

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.

Brian Lee · Accepted Answer · 2019-02-03 05:21:02Z

2

You're missing the single quotes around '{ ... }':

<business-listing :businesses="'{!! json_encode($testStuff) !!}'"></business-listing>

edited Feb 3, 2019 at 5:21

answered Feb 3, 2019 at 5:07

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Poulos Over a year ago

Hey thanks for your answer, I gave it a shot. But unfortunately that does not seem to be the problem, still seeing the same issue.

Nick Poulos · Accepted Answer · 2019-02-03 05:54:20Z

2

@DigitalDrifter's answer inspired me to mess with the quotes.

It seems that having the first set of double quotes "" was the problem?

If I just use the single quotes, that seems to work. I am not sure why that is the case, any other examples I have looked at, seem to have both, as DigitalDrifter's shows. Working example below.

<business-listing :businesses='{!! json_encode($testStuff) !!}'></business-listing>

answered Feb 3, 2019 at 5:54

Nick Poulos

4883 silver badges19 bronze badges

1 Comment

FirstIndex Over a year ago

The array does not need an extra encoding.. {!! $testStuff !!}

Collectives™ on Stack Overflow

When Passing Data Via Props From Laravel, Vue Component Not Rendering, Dumping Data

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related