Maison  >  Questions et réponses  >  le corps du texte

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

<p>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). </p> <p><strong>Formulaire modèle</strong></p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Les données de l'API Composable sont transmises dans :data, et la fonction (Composable) est également transmise dans @pagination-change-page.<strong>Balise de script</strong></p> <pre class="brush:php;toolbar:false;">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;</pre></p>
P粉598140294P粉598140294441 Il y a quelques jours616

répondre à tous(1)je répondrai

  • P粉164942791

    P粉1649427912023-08-29 00:48:39

    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;

    répondre
    0
  • Annulerrépondre