Laravel + Inertia + Vuejs:分页
Posted
技术标签:
【中文标题】Laravel + Inertia + Vuejs:分页【英文标题】:Laravel + Inertia + Vuejs: Pagination 【发布时间】:2021-06-25 00:08:21 【问题描述】:当我得到所有记录时,它会起作用:
...
$items = Item::all();
return Inertia::render('Rentals/Items', ['items' => $items]
);
但是当我尝试分页时,它会崩溃:
...
$items = Item::paginate(15);
return Inertia::render('Rentals/Items', ['items' => $items]
);
我收到此错误:
Uncaught (in promise) TypeError: Cannot read property 'id' of null
请帮忙。我究竟做错了什么?我被困了好几天了。
【问题讨论】:
使用 Laravel 的标准分页不适用于 Inertia.js。这里的答案之一对您有帮助吗?:***.com/questions/61076083/… 【参考方案1】:这里是 Inertia.js 的创建者。 ?
因此,您完全可以将 Laravel 分页器与 Inertia 一起使用,您只需将页面组件设置为兼容即可。
首先,确保您只将商品数据返回给您实际需要的客户端。您可以为此使用新的分页 through 方法。
$items = Item::paginate(15)->through(function ($item)
return [
'id' => $item->id,
'name' => $item->name,
// etc
];
);
return Inertia::render('Rentals/Items', ['items' => $items]);
接下来,在客户端,您需要一个分页组件来实际显示分页链接。这是来自Ping CRM demo app 的示例组件,使用 Tailwind CSS 构建。
<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>
最后,要在页面组件中显示项目和分页链接,请使用 items.data
和 items.links
属性。像这样的:
<template>
<div>
<div v-for="item in items.data" :key="item.id">
item.name
</div>
<pagination :links="items.links" />
</div>
</template>
<script>
import Pagination from '@/Shared/Pagination'
export default
components:
Pagination,
,
props:
items: Object,
,
</script>
您可以在Ping CRM demo app 中找到完整的工作示例。 ?
【讨论】:
您好@Jonathan,您的代码,当我编译分页组件时,我得到了VueCompilerError: v-if/else branches must use unique keys
。我正在使用 vue 3
@AdiMadhava 将:key="key"
属性放在与v-for
相同的元素上,而不是其子元素上。以上是关于Laravel + Inertia + Vuejs:分页的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Inertia JS 在 Laravel 中默认编辑或删除身份验证的 URL?
Laravel 8 Jetstream Inertia 所有 Inertia 请求都必须收到有效的 Inertia 响应