<p>In einer Tabelle werden die Daten angezeigt, aber wenn ich auf die von Laravel Vue Pagination bereitgestellte Seitenzahl klicke, wird mir dieselbe Seitenzahl 1 angezeigt. Nun, das Hauptproblem besteht darin, dass die Seitenzahl nicht an die Funktion (Composable API) übergeben wird. </p> <p><strong>Vorlagenformular</strong></p> <pre class="brush:php;toolbar:false;"><table class="table table-striped table-bordered"> <thead> <th>SN</th> <th>Kontotyp</th> <th>Name</th> <th>Geschäftsname</th> <th>Adresse</th> <th>Kontaktnummer</th> <th>E-Mail</th> </thead> <tbody> <tr v-for="(account, i) in Accounts.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> </tbody> </table> <Pagination :data="accounts" @pagination-change-page="getAccounts" </template></pre> <p>Die Daten von der Composable-API werden in:data übergeben, und die Funktion (Composable) wird auch in @pagination-change-page übergeben.<strong>Skript-Tag</strong></p> <pre class="brush:php;toolbar:false;">import LaravelVuePagination from 'laravel-vue-pagination'; Standard exportieren { Komponenten: { 'Paginierung': LaravelVuePagination }, aufstellen() { } const paginiert = ref(10); const { Accounts, Loading, getAccounts } = accountDetails();//Composables API onMounted(() => { getAccounts({paginate:paginates}); }); return { Accounts, Loading, getAccounts }; }, };</pre> </p><p> <p><strong>Composable API</strong> In dieser Funktion erhalte ich zwei Parameter, und hier sollte Pagination (@pagination-change-page) die Seitenzahl ausgeben! </p> <pre class="brush:php;toolbar:false;">import { ref } from '@vue/reactivity'; Axios aus 'Axios' importieren; const accountDetails = () => const Accounts = ref({}); const Loading = ref(true); const accountError = ref({}); const getAccounts = async ({page=1,paginate}) => wait axios.get('api/account/getAccounts?page='+page+'paginate='+paginate, { Überschriften: { Autorisierung: `Bearer ${localStorage.getItem('token')}`, Akzeptieren: '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 } } Standardkontodetails exportieren;</pre></p>

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 };
  },
};

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;