Php 将id参数从Laravel集合传递到Vue组件

在我的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>

转储$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动态呈现它们

---

谢谢。

我想这是一个数组。因此，您必须使用

foreach

或

$item[index]>id

在刀片文件中尝试以下操作：

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

现在，如果要将oneID作为路由参数传递，则可以使用组件中的

$route.params.ID

访问它们，其中“ID”是在vue路由器中设置的参数的名称

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

---

我需要在我的刀片文件中循环它们，然后将其传递给我的vue组件

：route

？您可以共享完整的转储映像吗？这将有助于给出解决方案。我想是的，你需要使用循环。你使用循环吗？尝试@foreach（$item作为$singleItem）然后在此循环中使用$singleItem->idI希望在Vue中保留所有循环逻辑，而不是在blade中保留太多。然后，您必须通过Vue资源在组件文件中获取这些数据，或者您可以使用axios。我实际上希望传入这些项目，并通过其id访问它们，但我希望每个项目都是一个对象，因为我需要访问该对象属性使用对象表示法。@PA-GW项数组可以是对象数组。我编辑了我的响应，将每个项目对象传递给一个项目组件，在该组件中可以使用对象表示法访问项目属性。那么，我不再使用

：route

属性将项目传递给vue了吗？现在，我正在使用

this.$http.get（）

检索项目？

<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>

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