Неопределенные реквизиты в vue.js

Я продолжаю изучать Laravel Jetstream со стеком inertia.js и vuejs 3.
А пока я хочу сделать динамическую разбивку на страницы, и это мой компонент:

Пользовательский контроллер

public function filter(Request $request)
{
    return Inertia::render('Users/Index', [
        'filters' => $request->all('search', 'trashed'),
        'users' => User::orderByName()
                    ->filter($request->only('search', 'trashed'))
                    ->paginate()
                    ->transform(function ($user) {
                        return [
                            'id' => $user->id,
                            'username' => $user->username,
                            'name' => $user->name,
                            'profile_photo_url' => $user->profile_photo_url,
                            'email' => $user->email,
                            'created_at' => $user->created_at->diffForHumans(),
                        ];
                    }),
    ]);
}

Родительский компонент

<pagination class = "mt-6" :links = "users.links" />

Дочерний компонент

<template>
    <div v-if = "links.length > 3">
        <div class = "flex flex-wrap -mb-1">
            <template v-for = "(link, key) in links">
                <div
                    v-if = "link.url === null"
                    :key = "key"
                    class = "mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
                    v-html = "link.label"
                />
                <inertia-link
                    v-else
                    :key = "key"
                    class = "mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500"
                    :class = "{ 'bg-white': link.active }"
                    :href = "link.url"
                    v-html = "link.label"
                />
            </template>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        links: Array,
    },
};
</script>

и, к сожалению, я получил ошибку $props.links is undefined, и я не знаю, почему я получил эту ошибку.
Может ли кто-нибудь помочь мне решить эту проблему?
Спасибо

Предоставленный код кажется правильным, поэтому нам нужно больше кода. Где твой защитник users.links? Убедитесь, что он определен, прежде чем пытаться его использовать. Есть ли ошибки в консоли?

tauzN 05.04.2021 12:09

@tauzN Я получил значение undefined, когда вижу пользователей данных в консоли.

Adi Madhava 06.04.2021 03:27
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
0
2
32
0

Другие вопросы по теме