Laravel + Inertia + Vuejs：分页

Posted 2023-02-22

【中文标题】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 相同的元素上，而不是其子元素上。