Laravel 未定义的变量异常 vue.js

Question

我想在 laravel blade 系统中测试一个简单的 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 想要访问 message 作为变量或常量，因为没有任何 message variable passed to view 我得到 Use of undefined constant 异常。那么解决方案是什么？

Answer 1

添加@{{消息}}

这将告诉 blade 忽略它。

Answer 2

前端和后端结合相同的符号不是一个好的方法。当然，带@，Blade可以忽略。

一个更简洁的想法是从后端提取前端，因为 Blade 和 Vue.js 使用相同的表示法：

前端 html，css en javascript（在你的情况下 Vue.js）
后端（在 php 中，在您的情况下为 Laravel）作为 REST-api，php returns json

最大的优势：

更安全
它更易于维护
更干净

Laravel 未定义的变量异常 vue.js

Laravel undefined variable exception with vue.js

php

laravel

vue.js

laravel-blade