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

Question

在我的 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 动态呈现？

谢谢。

Answer 1

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

Answer 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'
    ...
}