Laravel Blade Template passing data to Vue JS component

Question

I am having a problem passing a property using Vuejs ~1.0 to a child component from a Laravel Blade template. If I pass something in plain text it works just fine, but when I try to pass a js property, array, or object it doesn't work at all. I currently have a blade file with a custom component which looks like this:

<my-component video="@{{ stuff }}"></my-component>

If I leave out the @{{ }} the only thing that will be passed is the string stuff, and if I leave out the @, I obviously get a blade error, but if I use @{{ stuff }}, then all I get is the string {{ stuff }}. I'm obviously missing something, but can't tell where I'm going wrong. Thanks in advance.

Solution 1

Look like I just figured it out, it seems that I was missing the colon before video, so it should have appeared like so:

<my-component :video="stuff"></my-component>

Solution 2

If you are passing a variable to the component, then use:

<my-component :video= "{{ json_encode($stuff) }}" ></my-component>

Don't forget the double quotes or the result would be unpredictable for things like objects.

Solution 3

If you are passing model then do this:

<my-component :video="{{ $stuff->toJson() }}" inline-template></my-component>