Laravel 使用刀片服务器将值传递给Vue组件

我有Vue2，运行Laravel 5.5。尝试通过将值传递到组件时，我不断从VUE中获取错误

当我检查时，我确实看到了

数据路由name=“home”

，但是，我不断收到以下错误：

[Vue warn]：属性或方法“home”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。请参阅：

当组件加载时，控制台输出未定义的

---

现在我的问题是，为什么控制台输出未定义，为什么我会收到Vue警告，以及如何解决这个问题？

在道具中，应该使用属性名称而不是直接使用属性值

props: ['route-name'],

---

在道具中，应该使用属性名，而不是直接使用属性值

props: ['route-name'],

---

在本例中，您使用两个模板引擎，Laravel Blade和Vue。你应该读这一节。编写本文时，将数据从Laravel绑定到模板

<nav-bar data-route-name="{{$routeName}}" :route-name="{{$routeName}}"></nav-bar>

// After Laravel Blade Rendering you get:

<nav-bar data-route-name="home" :route-name="home"></nav-bar>

// This makes Vue warn because you did not declare data home

---

在本例中，您使用两个模板引擎，Laravel Blade和Vue。你应该读这一节。编写本文时，将数据从Laravel绑定到模板

<nav-bar data-route-name="{{$routeName}}" :route-name="{{$routeName}}"></nav-bar>

// After Laravel Blade Rendering you get:

<nav-bar data-route-name="home" :route-name="home"></nav-bar>

// This makes Vue warn because you did not declare data home

---

试着这样传球：

<nav-bar :route-name="'{{$routeName}}'"></nav-bar>

---

您需要发送带有

''

（引号）

的字符串，请尝试这样传递：

<nav-bar :route-name="'{{$routeName}}'"></nav-bar>

---

您需要发送带有

'

（引号）的字符串对此不确定，我从控制台日志中获得

NaN

。Vue警告仍然显示不确定，我从控制台日志中得到

NaN

。Vue警告仍在显示