ブレードでVueコンポーネントに値を渡す

Question

私はLaravel 5.5で動作するVue2を持っています。しかし、私はこのエラーを得続ける、私はdata-route-name="home"を参照してくださいか点検したときに、私はVUE

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

から取得したエラーを保つことにより、コンポーネントに値を渡すしようとすると：

[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の2つのテンプレートエンジンを使用しています。このセクション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>