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.

Mahdi Mirhendi · Accepted Answer · 2018-10-27 12:39:15Z

16

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>

edited Oct 27, 2018 at 12:39

Mahdi Mirhendi

4921 gold badge7 silver badges15 bronze badges

answered Nov 5, 2015 at 4:40

Azeame

2,4112 gold badges17 silver badges33 bronze badges

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

Comments

Jeffrey · Accepted Answer · 2018-04-29 18:40:29Z

10

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.

answered Apr 29, 2018 at 18:40

Jeffrey

2,1241 gold badge27 silver badges22 bronze badges

Comments

Humayun · Accepted Answer · 2018-06-05 17:52:09Z

5

If you are passing model then do this:

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

answered Jun 5, 2018 at 17:52

Humayun

1,0068 silver badges13 bronze badges

Collectives™ on Stack Overflow

Laravel Blade Template passing data to Vue JS component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related