HTML

nuxt paginate bootstrap 5

<template>
  <div class="container  card mt-4 mb-4">
    <div class="row text-center">
      <nuxt-link :to="`/`" title="Orqaga" style="width: 15px;"
                 :class="[
                    $ua.isFromPc() !== true ? '':'p-1 m-1', 'col border bg-light'
                ]">
        <img src="~/assets/svg/back.svg" class="max-image" title="Orqaga" style="width: 40px;">
      </nuxt-link>
    </div>
    <div>
      <h3 class="p-2">Umumiy reyinglar</h3>
      <div class="card mt-1">
        <table class="table table-sm">
          <thead class="table-light">
          <tr>
            <th></th>
            <th scope="col" width="3%">№</th>
            <th scope="col">Ismi Familiyasi</th>
            <th scope="col">Reytingi (ballari)</th>
            <th scope="col">Statusi</th>
            <th scope="col">Jami to'g'ri topgan</th>
            <!--            <th scope="col" width="5%" class="text-center">ID</th>-->
            <th scope="col" width="1%"><i class="bi bi-diagram-3"></i></th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(users, index) in rating_data">
            <td></td>
            <td class="align-middle pl-3">#{{ index + 1 }}</td>
            <td class="align-middle text-left">{{ users.name }}</td>
            <td class="align-middle">{{ Math.floor(users.rating) }}</td>
            <td class="align-middle">{{ users.status_name }}</td>
            <td class="align-middle">{{ users.question }} dona</td>
            <!--            <td class="text-center  align-middle">45</td>-->
            <td class="text-center align-middle">
              <nuxt-link :to="`/users/${users.id}`" class="btn btn-success btn-sm padingkichkina"><i class="bi bi-eye"></i></nuxt-link>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="container d-flex align-items-center justify-content-center">
          <nav>
            <ul class="pagination pagination-sm">
              <!--              <li class="page-item disabled">-->
              <!--                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Oldingi</a>-->
              <!--              </li>-->
              <!--              <li class="page-item active" aria-current="page">-->
              <!--                <span class="page-link">1</span>-->
              <!--              </li>-->
              <li v-for="(item, key) in links" :class="[ 'page-item',
                         (item.url === null ? 'disabled' : ''),
                         (item.active === true ? 'active' : ''),
                         ]">
                <button class="page-link" v-html="item.label" @click="pagination(item.url)"></button>
              </li>
              <!--              <li class="page-item">-->
              <!--                <a class="page-link" href="#">Keyingi</a>-->
              <!--              </li>-->
            </ul>
          </nav>
          <!--        <button class="btn btn-success" @click="getPaginateTrade">-->
          <!--          Yana yuklash-->
          <!--        </button>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  middleware: 'isAuthenticated',
  head() {
    return {
      title: "Foydalanuvchilar reytingi"
    };
  },
  data() {
    return {
      success      : false,
      next_page_url: null,
      number       : 0,
      links        : [],
      rating_data  : [],
    }
  },
  mounted() {
    this.$loading.show()
    this.HomePage()

  },
  methods: {
    async HomePage() {
      this.$axios.get(`rating/all`).then((res) => {
        this.success     = true
        this.rating_data = res.data.data.data;
        if (res.data.next_page_url !== null) {
          this.links = res.data.data.links
        }
      }).catch((error) => {
        this.has_error = true
        console.log(error)
      });
      this.$loading.hide();
    },
    pagination($url) {
      // alert($url)
      this.$loading.show()
      this.$axios.get($url).then((res) => {
        this.success     = true
        this.rating_data = res.data.data.data;
        if (res.data.next_page_url !== null) {
          this.links = res.data.data.links
        }
      }).catch((error) => {
        this.has_error = true
        console.log(error)
      });
      this.$loading.hide();

    },
  }
}
</script>