Блог

В моем blade.php файл, в котором у меня в настоящее время есть переменная $item , при сбросе равен:

 IlluminateDatabaseEloquentCollection {#2313 ▼
  #items: array:48 [▶]
}
  

Затем в моем blade.php файл Я вызываю компонент Vue и пытаюсь связать и передать маршрут (маршрут должен динамически отображать элемент по его идентификатору в Vue), и это выглядит как:

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

Но когда я перезагружаю свою страницу, я получаю эту ошибку:

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

Дамп $items

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

Как мне передать идентификаторы всех элементов в мой компонент vue, чтобы они могли динамически отображаться с использованием vue?

Спасибо.

Я думаю, что это массив. Итак, вы должны использовать foreach или $item[index]->id

Попробуйте это в вашем блейд-файле:

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

Это передаст полный объект item каждому ItemComponent, если вы хотите передать только идентификатор, вы можете использовать :itemId="{{ json_encode($item->id) }}" вместо этого.

Если вы хотите сохранить логику цикла в Vue, то обратитесь к моему предыдущему ответу с http-запросами вместо встроенных шаблонов:

Вместо этого ваша внутренняя конечная точка laravel должна отвечать после вызова из вашего компонента-оболочки Vue массивом идентификаторов в теле ответа. Затем вы можете выполнить итерацию по каждому идентификатору в массиве в Vue с помощью директивы v-for.

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

Теперь, если вы хотите передать один идентификатор в качестве параметра маршрута, вы можете получить к ним доступ с помощью $route.params.id в вашем компоненте, где ‘id’ — это имя параметра, с помощью которого вы настраиваете свой маршрутизатор vue

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