Lösung für das Problem, dass bei Verwendung der Laravel-Vue-Paginierung nicht zu einer anderen Seite gesprungen werden kann

Question

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.

Vorlagenformular

<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>

Die Daten von der Composable-API werden in:data übergeben, und die Funktion (Composable) wird auch in @pagination-change-page übergeben.Skript-Tag

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

Composable API In dieser Funktion erhalte ich zwei Parameter, und hier sollte Pagination (@pagination-change-page) die Seitenzahl ausgeben!

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;

Answer 1

成功使用Composition API Vue3进行工作
只需从getAccounts中删除paginate参数，并且不要将paginates传递给该函数。

更新的代码 </>

脚本

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

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;