CODEWITHSUNDEEP
phplaravellaravel-blade
rovac
rovac

Reputation: 2073

Unexpected token '{' when passing prop to vue component from blade

I need to pass a variable from a blade to a vue component, usually I am able to do something like

<vue-component :the-prop="{{ blah }}" />

when passing prop values. However in this case I'm trying to pass a value from $_SESSION, and I am getting an invalid token error and am not sure how to get around it.

I've tried:

<vue-component :the-prop="{{ $_SESSION['data'] }}" />

and

<vue-component :the-prop="{{ session('data') }}" />

and it seems never to even get to the "session" portion and gives me an error:

Invalid expression: unexpected token '{'

the code works fine if i hard-code an id like so:

<vue-component :the-prop="3" />

and typing out v-bind:the-prop makes no difference

Upvotes: 0

Views: 571

Answers (2)

miken32
miken32

Reputation: 42697

In a component, prefixing an attribute with a colon means you want it handled directly by PHP, as described in the documentation. So instead of this:

<vue-component :the-prop="{{ $_SESSION['data'] }}" />

Try this:

<vue-component :the-prop="$_SESSION['data']" />

Or, even better, this:

<vue-component :the-prop="session('data')" />

Upvotes: 0

Devin
Devin

Reputation: 11

If you're doing this from a blade template file, you should remove the colon so that the value is not binded. Blade itself should plug in the variable value from your {{ }} syntax, so there is no binding needed on the vue side of things.

Upvotes: 1

Related Questions