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

Answer 1

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.

Answer 2

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>

Answer 3

If you are passing model then do this:

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