Saya memiliki beberapa tampilan dan saya ingin menyimpan status pada masing-masing tampilan, sehingga pengguna tidak perlu melakukan hal yang sama lagi.

Di salah satunya, saya punya tabel dan saya menggunakan komponen bootstrap-pagination untuk pagination, jadi ketika pengguna mengubah halaman, saya mengirim permintaan ke server untuk data baru. Saya menyimpan parameter sortir dan filter di Vuex dan berfungsi dengan baik.

Tetapi ketika saya ingin menyimpan halaman saat ini seperti itu, bootstrap-pagination mengubahnya menjadi 1 setiap kali saya mengubah tampilan dan kembali. Apakah mungkin untuk mencegah perilaku itu?

Berikut adalah kode dalam HTML:

<b-pagination v-if="currentPage!=-1"
            v-model="currentPage"
            :total-rows="totalRows"
            :per-page="perPage"
            aria-controls="my-table"
            pils
            align="center"
            class="ml-auto mr-auto"
          ></b-pagination>

Dan kode dalam javascript:

  data: function () {
      return {
        ...
        currentPage: this.$store.state.currentPage,
        ...
      }
    },

    ...

    watch: {
        currentPage: function(){
                this.$store.commit('updateCurrentPage', this.currentPage);
                this.getData();
              },
    }
1
Mihailo Trajkovic 4 Mei 2020, 21:51

2 jawaban

Jawaban Terbaik

Masalah yang Anda hadapi kemungkinan besar berkaitan dengan urutan bagaimana data Anda dimuat dan disetel.

Saat komponen Anda diinisialisasi, Anda segera menyetel properti halaman currentPage, sementara (menurut saya) menyetel properti totalRows beberapa saat kemudian, setelah mengambil data dari database Anda.

Ini menyebabkan masalah karena pagination akan mengira ada 0 baris. Jadi ketika Anda mengaturnya ke halaman 5. Ini akan memeriksa properti perPage dan totalRows, dan karena belum ada halaman 5 (belum), maka secara otomatis akan mengatur currentPage kembali ke halaman 1 .

Sebagai gantinya, saya sarankan Anda menyetel currentPage ke nilai dari toko Anda SETELAH Anda mengambil data dan menyetel properti totalRows. Ini akan memperbaiki masalah yang Anda alami.

2
Hiws 6 Mei 2020, 08:51

Solusi lain adalah dengan menempatkan v-if pada elemen pagination yang memeriksa bahwa totalRows telah disetel. Ini menyebabkan elemen pagination dirender setelah nilai totalRows diketahui. Ini berguna ketika Anda memuat data menggunakan AJAX dan tidak mengetahui jumlah baris sebelumnya.

Misalnya

<b-pagination
  v-if="totalRows > 0"
  v-model="currPage"
  :total-rows="totalRows"
  :per-page="perPage"
  aria-controls="my-table"
  size="sm"
  limit="7"
  first-number
  last-number
  >
</b-pagination>
0
Nick Falco 30 Januari 2021, 04:14