[英]Laravel + Inertia + Vuejs: Pagination
当我获得所有记录时,它会起作用:
...
$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
请帮忙。 我究竟做错了什么? 我被困了好几天了。
Inertia.js 的创建者在这里。
因此,您完全可以将 Laravel 分页器与 Inertia 一起使用,您只需将页面组件设置为兼容即可。
首先,确保您只将项目数据返回给您实际需要的客户端。 您可以为此使用新的分页方法。
$items = Item::paginate(15)->through(function ($item) {
return [
'id' => $item->id,
'name' => $item->name,
// etc
];
});
return Inertia::render('Rentals/Items', ['items' => $items]);
接下来,在客户端,您需要一个分页组件来实际显示分页链接。 这是来自Ping CRM 演示应用程序的示例组件,使用 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 演示应用程序中找到完整的工作示例。
为了保持这篇文章的更新,我使用 vue 3、laravel 8 和惯性 0.10 添加了对我有用的内容:
在 Pagination 组件中,我必须像 @AdiMadhava 之前所说的那样更改:key 属性,此外我必须使用 Link 组件才能使页面链接可用,所以我的整个@/Shared/Pagination.vue
看起来像:
<template>
<div v-if="links.length > 3">
<div class="flex flex-wrap mt-8">
<template v-for="(link, key) in links" :key="key">
<div
v-if="link.url === null"
class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
v-html="link.label"
/>
<Link
v-else
class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-primary focus:text-primary"
:class="{ 'bg-white': link.active }"
:href="link.url"
v-html="link.label"
/>
</template>
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
import { Link } from "@inertiajs/inertia-vue3";
export default defineComponent({
components: {
Link,
},
props: {
links: Array,
},
});
</script>
它工作准确。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.