Penyelesaian kepada masalah tidak dapat melompat ke halaman lain apabila menggunakan laravel-Vue-pagination

Question

Dalam jadual, data sedang dipaparkan, tetapi apabila saya mengklik pada nombor halaman yang disediakan oleh Laravel Vue Penomboran, ia menunjukkan kepada saya nombor halaman 1 yang sama. Nah, masalah utama ialah nombor halaman tidak dihantar ke dalam fungsi (API Boleh Gubah).

Borang templat

<table class="meja berjalur meja bersempadan">
    <kepala>
      <th>SN</th>
      <th>Jenis Akaun</th>
      <th>Nama</th>
      <th>Nama kedai</th>
      <th>Alamat</th>
      <th>Nombor hubungan</th>
      <th>E-mel</th>
    </kepala>
    <tbody>
      <tr v-for="(akaun, i) dalam akaun.data" :key="account.id">
        <td>{{ ++i }}</td>
        <td>{{ account.account_type }}</td>
        <td>{{ account.name }}</td>
        <td>{{ (account.shop_name)?account.shop_name: 'KOSONG'}}</td>
        <td>{{ account.address }}</td>
        <td>{{ account.contact_number }}</td>
        <td>{{ account.email }}</td>
      </tr>
    </tbody>
  </table>
  <Penomboran :data="accounts" @pagination-change-page="getAccounts"
</template>

Data daripada Composable API dihantar dalam:data dan fungsi (Composable) juga dihantar dalam @pagination-change-page.Teg skrip

import LaravelVuePagination daripada 'laravel-vue-pagination';

eksport lalai {
    komponen: {
        'Penomboran': LaravelVuePagination
    },
  persediaan() {
    }
    const penomboran = ref(10);
    const { accounts, loading, getAccounts } = accountDetails();//Composables API
    onMounted(() => {
      getAccounts({halaman:halaman});
    });

    kembalikan { akaun, pemuatan, dapatkanAccounts };
  },
};

API Boleh Kompos Dalam fungsi ini, saya menerima dua parameter, dan di sinilah Penomboran (@penukaran-halaman halaman) harus membuang nombor halaman!

import { ref } daripada '@vue/reactivity';
import axios daripada 'axios';

Butiran akaun const = () =>
    akaun const = ref({});
    const loading = ref(true);
    const accountError = ref({});


    const getAccounts = tak segerak ({halaman=1,halaman}) =>
        tunggu axios.get('api/account/getAccounts?page='+page+'paginate='+paginate, {
            tajuk: {
                Keizinan: `Pembawa ${localStorage.getItem('token')}`,
                Terima: 'aplikasi/json',
            }
        }).then((res) => {
            accounts.value = res.data;
            loading.value = palsu;
            console.log(accounts.value);
        }).tangkap((resErr) => {
            loading.value = palsu;
            accountError.value = resErr;
        })
    }
    kembalikan { akaun, pemuatan, accountError, getAccounts }
}
eksport butiran akaun lalai;

Answer 1

Berjaya bekerja dengan Composition API Vue3
Hanya alih keluar parameter penomboran daripada getAccounts dan jangan hantar penomboran ke fungsi.

Kod dikemas kini </>

skrip

import LaravelVuePagination from 'laravel-vue-pagination';

export default {
    components: {
        'Pagination': LaravelVuePagination
    },
  setup() {
    }
   
    const { accounts, loading, getAccounts } = accountDetails();//Composables API    
    onMounted(() => {
      getAccounts();
    });

    return { accounts, loading,getAccounts };
  },
};

API Boleh Kompos

import { ref } from '@vue/reactivity';
import axios from 'axios';

const accountDetails = () => {
    const accounts = ref({});
    const loading = ref(true);
    const accountError = ref({});


    const getAccounts = async (page=1) => {
        await axios.get('api/account/getAccounts?page='+page, {
            headers: {
                Authorization: `Bearer ${localStorage.getItem('token')}`,
                Accept: 'application/json',
            }
        }).then((res) => {
            accounts.value = res.data;
            loading.value = false;
            console.log(accounts.value);
        }).catch((resErr) => {
            loading.value = false;
            accountError.value = resErr;
        })
    }
    return { accounts, loading, accountError, getAccounts }
}
export default accountDetails;