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

Posted 2023-02-22

【中文标题】vue.js 的 Laravel 未定义变量异常

【英文标题】：Laravel undefined variable exception with vue.js

【发布时间】：2016-05-06 08:12:31

【问题描述】：

我想在 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 想要将 message 作为变量或常量访问，并且因为没有任何 message 变量传递给 view 我得到 使用未定义的常量异常。那么有什么办法呢？

【参考方案1】：

添加@消息

这将告诉刀片忽略这一点。

【参考方案2】：

将相同的符号组合用于前端和后端并不是一个好方法。当然，有了@，Blade 可以忽略。

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

带有 html、css 和 javascript 的前端（在您的情况下为 Vue.js） 后端（在 php 中，在你的情况下是 Laravel）作为 REST-api 和返回 json 的 php

最大的优势：

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