Laravel vue.js中未定义的道具
我正在学习使用stackLaravel vue.js中未定义的道具,laravel,vue.js,inertiajs,Laravel,Vue.js,Inertiajs,我正在学习使用stackInerty.js和vuejs 3的Laravel Jetstream 现在我想进行动态数据分页,这是我的组件: 用户控制器 父组件 子组件 导出默认值{ 道具:{ 链接:数组, }, }; 不幸的是,我遇到了一个错误,$props.links未定义,我不知道为什么会出现这个错误 有人能帮我解决这个问题吗? 谢谢提供的代码似乎正确,因此我们需要更多的代码。您的用户链接在哪里?在尝试使用它之前,请确保它已定义。控制台中有错误吗?@tauzN当我在控制台中看到数据用户
Inerty.js和vuejs 3
的Laravel Jetstream
现在我想进行动态数据分页,这是我的组件:
用户控制器 父组件
子组件
导出默认值{
道具:{
链接:数组,
},
};
不幸的是,我遇到了一个错误,$props.links未定义,我不知道为什么会出现这个错误
有人能帮我解决这个问题吗?
谢谢提供的代码似乎正确,因此我们需要更多的代码。您的用户链接在哪里?在尝试使用它之前,请确保它已定义。控制台中有错误吗?@tauzN当我在控制台中看到数据用户时,我没有定义。
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>