javascript - 将 Laravel 变量传递给 Vue.js

Question

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

喜欢

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

我可以在其中通过 Vue.js 对其进行操作吗？

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

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

谢谢!

Answer 1

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

1. 传递变量以JSON格式查看

   <script>
       var app = <?=json_encode($locations)?>
   </script>
   

   另请参阅:Displaying Data

2. 通过ajax请求传递变量

   JS 片段(可以放在 Vue 挂载/创建的方法中)

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

   API 路由 (routes/api.php)

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

   位置 Controller

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