【Vue + Laravel】ページネーションを自作する

//　Reviewモデルをuseするのも忘れずに。
class TestController extends Controller{
    
    public function reviews()  {　　// ★①
       
        $reviews = Review::all();    // レビューモデルから今回はデータを全件取得。
        $data = [
            'reviews' => $reviews,     // Vue側に渡す$data（中には'reviews'が入ってる）を定義
        ];
    
        return response()->json($data);    // 今回はjson形式でVue側に渡します。
    }

// APIのミドルウェアを使用
Route::middleware('api')->group(function() {
    // レビューの取得
    Route::get('/api/reviews', 'TestController@reviews');
}

<template>
   <div>
        <div v-for="review in paginatedReviews" :key="review.id"> 
          
            <div>
              <h3>{{ review.title }}</h3>　// レビュータイトル
              <p>{{ formatDate(review.created_at) }}</p>　// レビューの投稿日
              <p>{{ review.score }}</p>　// 評価
              <p>{{ review.description }}</p>　// レビュー内容
            </div>
         </div>

<!-- ページネーションの追加 -->
    <div>
      <button v-if="currentPage > 1" @click="changePage(1)">
        ＜
      </button>
      <!-- 前のページボタン -->
      <button v-if="currentPage > 2" @click="changePage(currentPage - 1)">
        prev
      </button>
      <!-- 動的に変化するページボタン -->
      <button v-for="pageNumber in visiblePageNumbers" :key="pageNumber" :class="{ active: currentPage === pageNumber }" @click="changePage(pageNumber)">
        {{ pageNumber }}
      </button>
      <!-- 次のページボタン -->
      <button v-if="currentPage < totalPages - 1" @click="changePage(currentPage + 1)">
        next
      </button>
      <!-- 最終ページ -->
      <button v-if="currentPage < totalPages" @click="changePage(totalPages)">
        ＞
      </button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';　// axiosを読み込み
export default {
  data() {
    return {
      reviews: [],
      currentPage: 1,
      reviewsPerPage: 6,　// 1ページに表示するレビューの数
    };
  },
  async mounted() {
    await this.getReviews();　// ページが読み込まれたときにレビューをAPIで取得
  },
  computed: {
　
　// 全部で何ページになるか
    totalPages() {
      return Math.ceil(this.reviews.length / this.reviewsPerPage);
    },
    startIndex() {
      return (this.currentPage - 1) * this.reviewsPerPage;
    },
    endIndex() {
      return this.startIndex + this.reviewsPerPage;
    },
　// ページ毎に表示するレビューを計算し変更
    paginatedReviews() {
      return this.reviews.slice(this.startIndex, this.endIndex);
    },
    visiblePageNumbers() {
      const totalPages = this.totalPages;
      const currentPage = this.currentPage;
      const maxVisiblePages = 3;
      if (totalPages <= maxVisiblePages) {
        return Array.from({ length: totalPages }, (_, i) => i + 1);
      } else {
        const middlePage = Math.floor(maxVisiblePages / 2) + 1;
        if (currentPage <= middlePage) {
          return Array.from({ length: maxVisiblePages }, (_, i) => i + 1);
        } else if (currentPage >= totalPages - middlePage + 1) {
          return Array.from({ length: maxVisiblePages }, (_, i) => totalPages - maxVisiblePages + i + 1);
        } else {
          return Array.from({ length: maxVisiblePages }, (_, i) => currentPage - middlePage + i);
        }
      }
    },
  },
  methods: {
    // APIでレビューを取得するメソッド
    getReviews() {
      axios
        .get('/api/reviews')
        .then((response) => {
          this.reviews = response.data.reviews;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    // ページを変更するメソッド
    changePage(pageNumber) {
      this.currentPage = pageNumber;
    },
  },
  
};
</script>