Solution au problème de l'impossibilité de passer à une autre page lors de l'utilisation de laravel-Vue-pagination

Question

Dans un tableau, les données sont affichées, mais lorsque je clique sur le numéro de page fourni par Laravel Vue Pagination, il m'affiche le même numéro de page 1. Eh bien, le principal problème est que le numéro de page n'est pas transmis à la fonction (API Composable).

Formulaire modèle

<table class="table table-striped table-bordered">
    <tête>
      <th>SN</th>
      <th>Type de compte</th>
      <th>Nom</th>
      <th>Nom du magasin</th>
      <th>Adresse</th>
      <th>Numéro de contact</th>
      <th>E-mail</th>
    ≪/tête>
    <corps>
      <tr v-for="(compte, i) dans comptes.data" :key="account.id">
        <td>{{ ++i }}</td>
        <td>{{ account.account_type }}</td>
        <td>{{ account.name }}</td>
        <td>{{ (account.shop_name)?account.shop_name : 'EMPTY'}}</td>
        <td>{{ account.address }}</td>
        <td>{{ account.contact_number }}</td>
        <td>{{ account.email }}</td>
      ≪/tr>
    </tcorps>
  </tableau>
  <Pagination :data="comptes" @pagination-change-page="getAccounts"
</template>

Les données de l'API Composable sont transmises dans :data, et la fonction (Composable) est également transmise dans @pagination-change-page.Balise de script

importer LaravelVuePagination depuis 'laravel-vue-pagination';

exporter par défaut {
    Composants: {
        'Pagination' : LaravelVuePagination
    },
  installation() {
    }
    const pagine = ref(10);
    const { comptes, chargement, getAccounts } = accountDetails();//API Composables
    onMounted(() => {
      getAccounts({paginate:paginates});
    });

    return {comptes, chargement, getAccounts} ;
  },
};</pré>
</p><p>
<p><strong>API Composable</strong>
Dans cette fonction, je reçois deux paramètres, et c'est ici que Pagination (@pagination-change-page) doit renvoyer le numéro de page ! </p>
<pre class="brush:php;toolbar:false;">import { ref } depuis '@vue/reactivity';
importer des axios depuis 'axios' ;

const accountDetails = () =>
    comptes const = ref({});
    const chargement = ref(true);
    const accountError = ref({});


    const getAccounts = async ({page=1,paginate}) =>
        attendre axios.get('api/account/getAccounts?page='+page+'paginate='+paginate, {
            en-têtes : {
                Autorisation : `Bearer ${localStorage.getItem('token')}`,
                Accepter : 'application/json',
            }
        }).then((res) => {
            comptes.value = res.data;
            chargement.value = false;
            console.log(comptes.value);
        }).catch((resErr) => {
            chargement.value = false;
            accountError.value = resErr;
        })
    }
    return {comptes, chargement, accountError, getAccounts }
}
exporter le compte par défautDétails;

Answer 1

Travailler avec succès avec Composition API Vue3
Supprimez simplement le paramètre paginate de getAccounts et ne transmettez pas de paginates à la fonction.

Code mis à jour </>

script

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 Composable

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;