将 Laravel 变量传递给 Vue.js答案

【问题标题】：Passing Laravel variables to Vue.js将 Laravel 变量传递给 Vue.js
【发布时间】：2018-03-21 05:49:39
【问题描述】：

我开始学习 Vue.js。我想知道如何将刀片变量传递给 Vue.js？

喜欢

    return view('user.profile', ['locations' => $allLocations);

我可以在其中通过 Vue.js 操作它？

因为我正计划实施动态下拉菜单。实际上，有两个下拉菜单。因此，无论用户在第一个下拉菜单中选择什么，第二个下拉菜单都只会显示特定选项。

我已经尝试通过 1.) 隐藏元素并通过 Javascript 检索它，或者通过 2.) 在页面加载后使用 HTTP AJAX 请求来初始化元素，但我发现这种方法有点混乱或有点资源猪。除了我上面提到的还有其他实现吗？

谢谢！

【问题讨论】：

您可以通过使用自定义标签传递变量来做到这一点，例如并且您需要在 vue 组件中将 variable1 声明为道具

标签： javascript laravel vue.js

【解决方案1】：

您可以实现这两种方式来传递变量：

以 JSON 格式传递变量以查看
```
<script>
    var app = <?=json_encode($locations)?>
</script>
```
另请参阅：Displaying Data

通过ajax请求传递变量

JS sn-p（可以放在Vue的挂载/创建方法里面）

$.ajax({
    method: 'GET',
    url: '/api/locations',
    success: function (response) {
        // response.locations
    }
});

API 路由 (routes/api.php)

Route::get('locations', 'LocationController@getLocations');

位置控制器

public function getLocations() {
    ...
    return response()->json($locations);
}

【讨论】：

【解决方案2】：

最简单的方法是将它传递给你的视图（你有 vue 组件的地方），并将它作为道具接收。

 return view('user.profile', ['locations' => $allLocations]);

在你看来：

<your-component :data="{{$allLocations}}></your-component>

和 vue 组件，沿着这条线：

<template>
    --your HTML here--
</template>

<script>
    export default{

        props:['data'],

        data(){
            return{
                somethig:this.data.something
            }
        }
    }
</script>

这应该可以帮助您入门。此外，我建议您在 laravel docs、vue docs、laracasts 等中了解更多信息。

给你最好的编码！

【讨论】：

【解决方案3】：

你可以使用Vue、Vuex、Axios

当使用.vue时，我认为你不需要.blade

使用 Vue + Laravel：

在 assets/js 中创建 App.vue
在 app.js 中导入 App.vue（Laravel 5.6 的文件夹资产）
您想将刀片变量传递给 Vue.js？使用 JSON 或 XML。我爱杰森。所以在 Laravel Controller -> return json
在 App.vue 中，您可以使用 axios 调用 API（使用 Laravel 在控制器 + 路由中创建 1 个 API...）并且您拥有所有变量，您想要:)

帮助它帮助你。谢谢

【讨论】：

【解决方案4】：

我尝试使用该方法检查我的订阅，发现它对你很方便：-

Vue.component('subscribe', require('./components/Subscribe.vue'));
const app = new Vue({
    el: '#app'
});

通过链接尝试：- enter link description here

【讨论】：