Laravel + 惯性 + Vuejs：分页

Question

当我获得所有记录时它起作用了：

    ...

    $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

请帮忙。我究竟做错了什么？我卡了好几天了。

Answer 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>
import {InertiaLink} from "@inertiajs/inertia-vue3";

export default {
  props: {
    links: Array,
  },
  components : {
    InertiaLink
  }
}
</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 中找到完整的工作示例。

Answer 2

只是为了保持这个 post 更新，我正在使用 vue 3、laravel 8 和 inertia 0.10 添加对我有用的东西：

在分页组件中，我必须像@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>

而且它工作准确。

Laravel + 惯性 + Vuejs：分页

Laravel + Inertia + Vuejs: Pagination

inertiajs

laravel