将 prop 从 blade 传递给 vue 组件时出现意外标记“{”

Question

我需要将变量从 blade 传递到 vue 组件，通常我可以做类似

的事情

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

传递道具值时。然而，在这种情况下，我试图从 $_SESSION 传递一个值，但我收到一个无效令牌错误，我不确定如何解决它。

我试过：

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

和

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

似乎从来没有到达“session”部分并给我一个错误：

Invalid expression: unexpected token '{'

如果我 hard-code 像这样的 id，代码工作正常：

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

和输入 v-bind:the-prop 没有区别

Answer 1

如果您是从 blade 模板文件执行此操作，则应删除冒号，这样值就不会被绑定。 Blade 本身应该插入 {{ }} 语法中的变量值，因此在 vue 方面不需要绑定。

Answer 2

在组件中，在属性前加上冒号意味着您希望它直接由 PHP、as described in the documentation 处理。所以不是这个：

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

试试这个：

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

或者，更好的是：

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

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