Laravel Vue.js的未定義變量異常

Question

我想在laravel刀片系統中測試一個簡單的vue.js，這是我在test.blade.php視圖文件中的代碼：

<div id="app">
   <p>{{message}}</p>
</div>
 <script src="{{url('/assets/js/vue/vue.min.js')}}"></script>
 <script>
  new Vue({
    el:'#app',
    data:{
        message:"hello world"
    }
});
</script>

問題在於，渲染視圖文件時laravel希望以變量或常量的形式訪問消息 ，並且因為沒有傳遞給視圖的任何消息變量，我得到了使用未定義的常量異常的信息。 那么解決方案是什么？

Answer 1

添加@ {{message}}

這將告訴刀片忽略這一點。

Answer 2

將前端和后端的相同符號組合在一起不是一個好方法。 當然，使用@ ，Blade可以忽略。

一個更干凈的想法是從后端提取前端，因為Blade和Vue.js使用相同的符號：

• 帶有html，css javascript的前端（在您的情況下為Vue.js）
• 作為REST-api的后端（在php中為Laravel），其中php返回json

最大的優點：

• 更安全
• 更容易維護
• 比較干凈