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

时间:2016-01-28 19:22:22

标签: php laravel vue.js laravel-blade

我想在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想要将消息作为变量或常量访问,并且因为没有任何消息变量传递给视图我得到使用未定义的常量异常。那么解决方案是什么?

2 个答案:

答案 0 :(得分:14)

添加@ {{message}}

会告诉刀片忽略这一点。

答案 1 :(得分:3)

对于前端和后端组合相同的表示法并不是一个好方法。当然,使用@,Blade可以忽略。

更清晰的想法是从后端提取前端,因为Blade和Vue.js使用相同的表示法:

  • 前端有html,css和javascript(在你的情况下是Vue.js)
  • 后端(在php中,在你的情况下是Laravel)作为REST-api,带有返回json的php

最大的优势:

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