【Laravel10 + Vue3】vuejs-paginate-nextでページネーションを実装(2)

前回の記事の続きです。

前回はbootstrap5のスタイルを適用しましたが、

今回は、LaravelデフォルトのTailwind CSSを適用していきます。

ビューファイル編集
Vueコンポーネント編集
ブラウザで確認

ビューファイル編集

「resources/views/users.blade.php」を開いて編集・保存します。

Tailwind CSSのCDN版を適用します。


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel Vite Vue</title>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

Vueコンポーネント編集

「resources/js/App.vue」を開いて編集・保存します。

paginateコンポーネントへ渡すpropsの「*-class」の値としてTailwind CSSのクラス指定をします。

propsの一覧はコンポーネントのドキュメントを参照してください。

vuejs-paginate-next

A simple Vue3 pagination component.. Latest version: 1.0.2, last published: 2 years ago. Start using vuejs-paginate-next...

bootstrap5の@importは削除します。

<template>
    <div>
        <paginate
            v-model="currentPage"
            :page-count="pageCount"
            :page-range="3"
            :margin-pages="2"
            :click-handler="clickCallback"
            :prev-text="'<'"
            :next-text="'>'"
            :container-class="'flex'"
            :page-class="'items-center px-3 py-2 text-medium font-medium text-gray-500 bg-white hover:bg-yellow-300 border border-gray-300 rounded-md'"
            :prev-class="'items-center px-3 py-2 text-medium font-medium text-gray-500 bg-white hover:bg-yellow-300 border border-gray-300 rounded-md'"
            :next-class="'items-center px-3 py-2 text-medium font-medium text-gray-500 bg-white hover:bg-yellow-300 border border-gray-300 rounded-md'"
            :disabled-class="'items-center px-3 py-2 text-medium font-medium text-gray-500 bg-white hover:bg-white border border-gray-300 rounded-md'"
            :active-class="'items-center px-3 py-2 text-medium font-medium text-orange-200 bg-blue-700 hover:bg-blue-500 border border-gray-300 rounded-md'"
        >
        </paginate>
        絞り込み：ドメイン<select v-model="domain" @change="changeDomain" class="mx-2 my-2 bg-sky-100">
          <option v-for="d in domains" :value="d.domain">{{ d.domain.length > 0 ? d.domain : '指定しない' }}</option>
        </select>
        表示件数<select v-model="perPage" @change="changePerPage" class="mx-2 my-2 bg-sky-100">
          <option v-for="p in perPages" :value="p">{{ p }}</option>
        </select>件/ページ<br>
        並び順：ID<select v-model="orderbyID" @change="changeOrderbyID" class="mx-2 my-2 bg-sky-100">
          <option v-for="o in orderbyIDs" :value="o">{{ orderbyIDText[o] }}</option>
        </select>
        <ul class="p-6 divide-y divide-slate-200">
          <li v-for="u in users.data" class="flex px-6 py-2 hover:bg-green-200 rounded-lg">{{ u.id }}: {{ u.name }} &lt;{{ u.email }}&gt;</li>
        </ul>
    </div>
</template>

<script>
import Paginate from 'vuejs-paginate-next';
export default {
    components: {
      paginate: Paginate,
    },
    data () {
      return {
        perPage: 10,
        pageCount: 1,
        currentPage: 1,
        users: [],
        domains: [],
        perPages: [],
        domain: '',
        orderbyID: 'asc',
        orderbyIDs: ['asc', 'desc'],
        orderbyIDText: {asc: '昇順', desc: '降順'},
        apiBase: location.protocol + '//' + location.host + '/api/users'
      }
    },
    methods: {
      apiUrl (pageNum, perPage, domain, orderbyID) {
        return this.apiBase
               + '?page=' + pageNum
               + '&perPage=' + perPage
               + '&domain=' + domain
               + '&orderbyID=' + orderbyID;
      },
      async fetchUsers (pageNum, perPage, domain, orderbyID) {
        const url = this.apiUrl(pageNum, perPage, domain, orderbyID);
        const res = await fetch(url);
        const json = await res.json();
        this.users = json.users;
        this.domains = json.domains;
        this.perPages = json.perPages;
        this.pageCount = json.users.last_page;
      },
      clickCallback (pageNum) {
        this.fetchUsers(pageNum, this.perPage, this.domain, this.orderbyID);
        this.currentPage = pageNum;
      },
      changeDomain () {
        this.fetchUsers(1, this.perPage, this.domain, this.orderbyID);
        this.currentPage = 1;
      },
      changePerPage () {
        this.fetchUsers(1, this.perPage, this.domain, this.orderbyID);
        this.currentPage = 1;
      },
      changeOrderbyID () {
        this.fetchUsers(this.currentPage, this.perPage, this.domain, this.orderbyID);
      }
    },
    mounted () {
      this.fetchUsers(this.currentPage, this.perPage, this.domain, this.orderbyID);
    }
}
</script>

<style lang="css">
</style>