私の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 を使用して動的にレンダリングできるようにするにはどうすればよいですか?
ありがとうございます。
------------------------
ブレード ファイルでこれを試してください:
@foreach ($item as $items)
<ItemComponent
v-bind:item="{{ json_encode($item) }}"
/>
@endforeach
これにより、完全な項目オブジェクトがそれぞれのオブジェクトに渡されます。itemComponent で、ID だけを渡したい場合は、 :itemId="{{ json_encode($item->id) }}" を使用できます。
Vue でループ ロジックを保持したい場合は、インライン テンプレートの代わりに http リクエストに関する私の以前の回答を参照してください。
代わりに、laravel バックエンド エンドポイントは、Vue ラッパー コンポーネントから呼び出された後、応答本文に ID の配列を含めて応答する必要があります。その後、v-for ディレクティブを使用して、Vue の配列内の各 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>
ここで、1 つの ID をルート パラメーターとして渡したい場合は、コンポーネント内で $route.params.id を使用して ID にアクセスできます。「id」は、vue ルーターで設定したパラメーターの名前です。と
{
path: '/path/to/view/:id'
...
}
3
実際には項目を渡して、その ID でアクセスできるようにしたいのですが、オブジェクト表記を使用してオブジェクトのプロパティにアクセスする必要があるため、各項目をオブジェクトにしたいと考えています。
– コード鑑定家
2020 年 9 月 4 日 19:45
1
@PA-GW items 配列にはオブジェクトの配列を指定できます。各項目オブジェクトを項目コンポーネントに渡すように応答を編集しました。ここでは、オブジェクト表記を使用してアイテムのプロパティにアクセスできます。
– ナリ
2020 年 9 月 4 日 20:14
では、:route プロパティを使用して項目を vue に渡すことはもうできないのでしょうか?今、 this.$http.get() を使用して項目を取得しています ?
– コード鑑定家
2020 年 9 月 4 日 20:26
------------------------
これは配列だと思います。それで、あなたはforeach または $item[index]->id
を使用する必要があります
5
ブレード ファイルでそれらをループし、それを vue コンポーネントに渡す必要があります:route ?
– コード鑑定家
2020 年 9 月 4 日 19:06
完全なダンプ イメージを共有していただけますか?解決策を提供するのに役立ちます。そして、確かにループを使用する必要があると思います。
– バッピ・サハ
2020 年 9 月 4 日 19:10
ループを使用しますか? @foreach($item as $singleItem) を試してから、このループで $singleItem->id
を使用してください
– バッピ・サハ
2020 年 9 月 4 日 19:39
Vue のすべてのループ ロジックをブレードではあまり保持したくありませんでした。
– コード鑑定家
2020 年 9 月 4 日 19 時:39
その後、vue リソースによってコンポーネント ファイル内のこれらのデータを取得する必要があります。または、axios を使用することもできます。
– バッピ・サハ
2020 年 9 月 4 日 19:51
