Vueセッション変数をバインドした後の構文エラー

Question

vueコンポーネントのプロンプトとしてセッション変数をバインドしようとすると、この構文エラーが発生します。私は自分のコードを見直したので、自分のコードで間違いを見つけられませんでした。しかし、より多くの目が何かを見つけることができた、私は望む。私は私のコンポーネントを登録するのはここ

は次のとおりです。

<template> 
    <div class="alert alert-danger alert-dismissible fade show" role="alert"> 
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     text here 
    </div> 
</template> 

<script> 
    export default{ 
     name: 'FlashMsg', 

     props: ['message'], 

     data(){ 
      return{ 

      } 
     } 
    } 
</script> 

そして、ここでは私が私の見解では、それを使用する方法である：

ここ

Vue.component('fav-btn', require('../components/FavBtn.vue')); 
Vue.component('fund-btn', require('../components/FundBtn.vue')); 
Vue.component('flash-msg', require('../components/FlashMsg.vue')); 

const vm = new Vue({ 
    el: '#app' 
}); 

は私に迷惑を与えている要素であります

<flash-msg v-bind:message="{{ session('message') }}"></flash-msg> 

ここで、バインド・ディレクティブを削除すると、コンポーネントは問題なくロードされます。セッションから渡されたデータに問題がありますか？私はバックエンドとしてLaravelを使用します。ここで

は誤りです：

[Vue warn]: Failed to generate render function: 

SyntaxError: Unexpected token } in 

with(this){return _c('div',{attrs:{"id":"app"}},[_c('flash-msg',{attrs:{"message":}}), 

Answer 1

は、これはあなたがバインド構文を必要としない場合です。メッセージ値はサーバから来ているので、基本的に静的な値のクライアント側であり、message="value"は完全にうまくいきます。

バインディング構文（v-bindまたは:）を使用すると、Vueは引用符で囲まれた名前の変数を検索しようとするため、構文エラーが発生します。のは、あなたのレンダリングされた出力が

v-bind:message="Hello World" 

ことになったその後のVueはHello Worldの値が何であるかを見つけるために、JavaScriptのコンテキストでHello Worldを評価するために起こっているとしましょう。明らかに、Hello Worldは有効なJavaScript式ではないため、構文エラーが発生します。