Laravel 将 json 传递给 vue.js

Posted 2023-02-22

【中文标题】Laravel 将 json 传递给 vue.js

【英文标题】：Laravel pass json to vue.js

【发布时间】：2016-06-15 22:00:40

【问题描述】：

我正在使用 Laravel，我想将 json 传递给我的 new Vue 实例。我怎么能这样。

我这样传递员工对象：

 $employees = EmployeeModel::with('role','department.company')->get();
 return view('employees.employees')->with('employees',$employees);

然后在我的新 Vue 中我这样做：

new Vue(
            el: 'body',
            data:
                role: '',
                company: '',
                list:' $employees ',
                created() 
                    this.list = JSON.parse(this.list);
                
            
        );

它会抛出一个错误：vue.js:983 [Vue warn]: Error when evaluation 表达式“公司名称”。

当我将 json 手册放入列表时，它可以工作！像这样：

  new Vue(
                el: 'body',
                data:
                    role: '',
                    company: '',
            list:["EmployeeId":1,"RoleId":5,"DepartmentId":6,"InternId":1,"FirstName":"Zoe","LastName":"Altenwerth","Bio":"Quidem perferendis.","email":"[e-mail]","LinkedIn":"[e-mail]","Gender":0,"password":"$2y$10$bbUlDh2060RBRVHSPHoQSu05ykfkw2hGQa8ZO8nmZLFFa3Emy18gK","PlainPassword":"gr^S=Z","remember_token":"D528C0Ba1Xzq3yRV7FdNvDd8SYbrM0gAJdFUcOBq4sNEJdHEOb2xIQ0geVhZ","Address":"0593 Dallin Parkway Apt. 499\nBotsfordborough, MT 12501","Zip":"21503-","City":"East Janiston","ProfilePicture":null,"BirthDate":"2002-10-13 00:00:00","StartDate":"1995-11-09 21:42:22","EndDate":"2011-01-27","Suspended":0,"created_at":"2016-02-29 12:21:42","updated_at":"2016-03-02 11:53:58","deleted_at":null,"role":"RoleId":5,"RoleName":"Superadministrator","Description":"Mag administrators toevoegen en bewerken","deleted_at":null,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00","department":"DepartmentId":6,"CompanyId":12,"DepartmentName":"com","Description":"Accusantium quae.","deleted_at":null,"created_at":"2016-02-29 12:21:41","updated_at":"2016-02-29 12:21:41","company":"CompanyId":12,"CompanyName":"Dare, Bailey and Bednar","Logo":null,"Address":"85762 Tabitha Lights\nWest Jettie, AK 20878-2569","Zip":"29601","City":"Traceside","KvKNumber":"84c70661-9","EcaboNumber":"fdee61e3-a22d-3332-a","deleted_at":null,"created_at":"2016-02-29 12:21:41","updated_at":"2016-02-29 12:21:41"]
                    created() 
                        this.list = JSON.parse(this.list);
                    
                
            );

那么如何将 $employees 对象传递给我的 new Vue 实例并使用它？

【问题讨论】：

“手动 JSON”是什么意思？第二个示例看起来不像 JSON...

@elclanrs 是的，对不起，我已经改变了 ^.

【参考方案1】：

在声明 Vue.js 之前，我是这样做的。

var employees = !!  json_encode($employees) !!;

然后

 list: employees,

【讨论】：

你可能仍然应该转义字符串

【参考方案2】：

我的猜测是您必须以 JSON 格式发送数据。试试这个：

 return view('employees.employees')->with('employees',json_encode($employees));

【讨论】：

事实并非如此。因为 Laravel 会自动执行此操作。