将 Laravel 集合中的 id 参数传递给 Vue 组件

Posted 2023-02-22

【中文标题】将 Laravel 集合中的 id 参数传递给 Vue 组件

【英文标题】：Passing id parameter from Laravel Collection to Vue Component

【发布时间】：2020-12-24 01:04:24

【问题描述】：

在我的 Blade.php 文件中，我目前有一个变量 $item，当转储时等于：

Illuminate\Database\Eloquent\Collection #2313 ▼
  #items: array:48 [▶]

然后在我的 Blade.php 文件中，我调用了一个 Vue 组件并尝试绑定并传递一个路由（路由应该通过它在 Vue 中的 id 动态呈现一个项目），它看起来像：

 <my-items
   :route=" json_encode(route('items.show', ['id' => $item->id])) "
  ></my-items>

但是当我重新加载我的页面时，我收到了这个错误：

Property [id] does not exist on this collection instance.

$items 转储

Illuminate\Database\Eloquent\Collection #2371 ▼
#items: array:48 [▼
0 => App\Items #2351 ▶
1 => App\Items #2350 ▶
2 => App\Items #2349 ▶
3 => App\Items #2348 ▶
4 => App\Items #2347 ▶
5 => App\Items #2346 ▶
6 => App\Items #2345 ▶
7 => App\Items #2344 ▶
8 => App\Items #2343 ▶
9 => App\Items #2342 ▶
10 => App\Items #2341 ▶
11 => App\Items #2340 ▶
12 => App\Items #2339 ▶
13 => App\Items #2338 ▶
14 => App\Items #2337 ▶
15 => App\Items #2336 ▶
16 => App\Items #2335 ▶
17 => App\Items #2334 ▶
18 => App\Items #2333 ▶
19 => App\Items #2332 ▶
20 => App\Items #2331 ▶
21 => App\Items #2330 ▶
22 => App\Items #2329 ▶
23 => App\Items #2328 ▶
24 => App\Items #2327 ▶
25 => App\Items #2326 ▶
26 => App\Items #2325 ▶
27 => App\Items #2324 ▶
28 => App\Items #2323 ▶
29 => App\Items #2322 ▶
30 => App\Items #2321 ▶
31 => App\Items #2320 ▶
32 => App\Items #2319 ▶
33 => App\Items #2318 ▶
34 => App\Items #2317 ▶
35 => App\Items #2316 ▶
36 => App\Items #2315 ▶
37 => App\Items #2314 ▶
38 => App\Items #2313 ▶
39 => App\Items #2312 ▶
40 => App\Items #2311 ▶
41 => App\Items #2310 ▶
42 => App\Items #2309 ▶
43 => App\Items #2308 ▶
44 => App\Items #2307 ▶
45 => App\Items #2306 ▶
46 => App\Items #2305 ▶
47 => App\Items #2304 ▶
]

如何将所有项目的 id 传递给我的 vue 组件，以便它们可以使用 vue 动态呈现？

谢谢。

【参考方案1】：

我认为这是一个数组。所以你必须使用foreach 或$item[index]->id

【讨论】：

我需要在刀片文件中遍历它们，然后将其传递给我的 vue 组件:route ?

你能分享一个完整的转储图像吗？这将有助于提供解决方案。我认为是的，您需要使用循环。

你使用循环吗？尝试 @foreach($item as $singleItem) 然后在这个循环中使用 $singleItem->id

我想保留 Vue 中的所有循环逻辑，而不是刀片。

那么你必须通过vue资源在组件文件中获取这些数据，或者你可以使用axios。

【参考方案2】：

在你的刀片文件中试试这个：

@foreach ($item as $items)
    <ItemComponent
        v-bind:item=" json_encode($item) "
    />
@endforeach

这会将完整的 item 对象传递给每个 ItemComponent，如果您只想传递 id，则可以改用 :itemId=" json_encode($item->id) "。

如果您想在 Vue 中保留循环逻辑，请参考我之前使用 http 请求而不是内联模板的答案：

相反，您的 laravel 后端端点应该在从您的 Vue 包装器组件调用后使用响应正文中的 ID 数组进行响应。然后你可以在 Vue 中使用 v-for 指令遍历数组中的每个 ID。

<template>
    <div>
        <div class="item" v-for="item in items" :key="item.id">
            <ItemComponent :item="item"/>
        </div>
    </div>
</template>

<script>
export default 
    data() 
        return 
            items: []
        
    ,
    created: function() 
        // When component instance has loaded (page load)
        // Call your laravel endpoint
        this.$http.get("/laravel/endpoint").then((res) => 
            this.items = res.body.items
        ).catch((error) => 
            console.log(error);
        );
    

</script>

现在，如果您想将 一个 ID 作为路由参数传递，那么您可以在组件中使用 $route.params.id 访问它们，其中 'id' 是您设置的参数的名称在你的 Vue 路由器中使用

    path: '/path/to/view/:id'
    ...

【讨论】：

我实际上想传递项目并让它们可以通过它们的 id 访问，但我希望每个项目都是一个对象，因为我需要使用对象表示法访问对象属性。

@PA-GW items 数组可以是对象数组。我编辑了我的响应，将每个项目对象传递给一个项目组件，可以使用对象表示法访问项目属性。

所以我不再使用 :route 属性将我的项目传递给 vue 了吗？现在我正在使用 this.$http.get() 检索项目？