Question

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

喜欢

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

我可以通过Vue.js操纵它吗？

因为我打算实施动态下拉列表。实际上，有两个下拉列表。因此，无论用户在第一个下拉列表中选择什么，第二个下拉列表将仅显示特定选项。

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

谢谢！

Answer 1

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

将变量传递给JSON格式的视图
```
<script>
    var app = <?=json_encode($locations)?>
</script>
```
另请参阅：Displaying Data

通过ajax请求传递变量

JS代码段（可以放在Vue挂载/创建的方法中）

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

API路线（routes / api.php）

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

<强> LocationController

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

Answer 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等中学到更多。

最好的编码给你！

Answer 3

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

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

尝试转到链接： - enter link description here

Answer 4

您可以使用 Vue，Vuex，Axios

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

使用Vue + Laravel：

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

帮助你。感谢

将Laravel变量传递给Vue.js

4 个答案: