Vue组件中如何使用Laravel数据答案

【问题标题】：How to use Laravel data in Vue componentVue组件中如何使用Laravel数据
【发布时间】：2019-05-15 11:04:55
【问题描述】：

文件结构

App.blade.php 内部

我使用vue router拉取组件。

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案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']

【讨论】：