Vue组件中如何使用Laravel数据

Posted 2023-02-23

【中文标题】Vue组件中如何使用Laravel数据

【英文标题】：How to use Laravel data in Vue component

【发布时间】：2019-05-15 11:04:55

【问题描述】：

文件结构

App.blade.php 内部

我使用vue router拉取组件。

我有一个像 $users 这样的普通变量，我可以在像 $users 这样的刀片文件中访问它。现在如何访问组件中的相同数据？

【问题讨论】：

你的组件在哪里？在.php 文件或.js 或.vue 文件中？

【参考方案1】：

如果您的 $users 变量是您可以使用的集合：

<my-component :users="!! $users->toJson() !!"></my-component>

【讨论】：

只有当这个组件放在.php文件中时，这肯定会起作用。

我假设这里提到了App.blade.php 的情况。

【参考方案2】：

Laravel 是在前端 javascript 之前编译的 php 服务器端脚本语言，而 Vue 是 javascript。

所以要在 js 中获取 php 变量的值，在输入文本字段中将此值作为 json

<input type="hidden" id="users" value="json_encode($users)">

在 vuejs 里面 mount() 更新你的 data's, users 元素

mounted()
   var users = document.querySelector("#users").value;
   users = JSON.pars(users);
   this.users = users;

【参考方案3】：

为此我使用了道具，看看我的例子：

我有一个 QuestionComponent，我想向文件发送有价值的 $quetion_set->id，以便在刀片文件中我发送一个 props，

 <question question_set_id="$question_set->id"/>

在 QuestionComponent 我设置了道具：props:['question_set_id'], 然后在组件中使用它：this.question_set_id

如果你想传递数组数据，那么你应该使用 JSON.parse 函数来获取你的数据，例如：

   JSON.parse(this.question_set_id)['id']