Я продолжаю изучать 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, и я не знаю, почему я получил эту ошибку.
Может ли кто-нибудь помочь мне решить эту проблему?
Спасибо
@tauzN Я получил значение undefined, когда вижу пользователей данных в консоли.






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