使用Blade

Question

我有Vue2，与Laravel 5.5一起运行。尝试将值传递给组件我不断从VUE中获取错误

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

当我检查时，我确实看到data-route-name="home"，但是，我一直收到此错误：

[Vue警告]：属性或方法“home”未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

props: ['routeName'],
mounted() {
  console.log(this.routeName);
}

组件加载时控制台输出undefined

现在我的问题是为什么控制台输出未定义，为什么我得到Vue警告，我该如何解决？

Answer 1

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

props: ['route-name'],

Answer 2

在这种情况下，你使用两个模板引擎，Laravel Blade和Vue。您应该阅读本节Blade & Javascript Frameworks。在编写本文时，您将从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

我猜你试图将数据从Vue绑定到模板？您可以添加@以忽略Laravel Blade渲染。我还修改了一些语法，你应该阅读Vue: Template Syntax中的手册。

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

// After Laravel Blade Rendering you get:

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

Answer 3

只需尝试像这样通过：

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

您需要使用''（引号）发送字符串