<p>テーブルにデータが表示されていますが、Laravel Vue Pagination によって提供されるページ番号をクリックすると、同じページ番号 1 が表示されます。そうですね、主な問題は、ページ番号が関数 (コンポーザブル API) に渡されないことです。 </p> <p><strong>テンプレートフォーム</strong></p> <pre class="brush:php;toolbar:false;"><table class="テーブル テーブルストライプ テーブルボーダー"> <頭> SN <th>アカウントタイプ</th> <th>名前</th> <th>店舗名</th> 住所 連絡先番号 <th>メール</th> </頭> <みんな> <tr v-for="(account, i) in accounts.data" :key="account.id"> <td>{{ i }}</td> <td>{{ account.account_type }}</td> <td>{{アカウント名 }}</td> <td>{{ (アカウント.ショップ名)?アカウント.ショップ名: '空'}}</td> <td>{{アカウント.アドレス }}</td> <td>{{ account.contact_number }}</td> <td>{{ account.email }}</td> </tr> </tbody> </テーブル> <ページネーション :data="アカウント" @pagination-change-page="getAccounts" /> </template></pre> <p>Composable API からのデータは:data に渡され、関数 (Composable) も @pagination-change-page に渡されます。<strong>スクリプト タグ</strong></p> <pre class="brush:php;toolbar:false;">import LaravelVuePagination from 'laravel-vue-pagination'; デフォルトのエクスポート { コンポーネント: { 'ページネーション': LaravelVueページネーション }、 設定（） { } const ページネーション = ref(10); const { accounts, reading, getAccounts } = accountDetails();//コンポーザブル API onMounted(() => { getAccounts({paginate:paginate}); }); return { アカウント、読み込み中、getAccounts }; }、 };</pre> </p><p> <p><strong>コンポーザブル API</strong> この関数では 2 つのパラメーターを受け取ります。ここで、Pagination (@pagination-change-page) がページ番号をスローする必要があります。 </p> <pre class="brush:php;toolbar:false;">import { ref } from '@vue/reactivity'; 「axios」から axios をインポートします。 const accountDetails = () => { const アカウント = ref({}); const ロード = ref(true); const accountError = ref({}); const getAccounts = async ({page=1,paginate}) => { await axios.get('api/account/getAccounts?page=' page 'paginate=' paginate, { ヘッダー: { 権限: `ベアラー ${localStorage.getItem('token')}`、 受け入れる: 'アプリケーション/json', } }).then((res) => { accounts.value = res.data; ロード値 = false; console.log(accounts.value); }).catch((resErr) => { ロード値 = false; accountError.value = resErr; }) } return { アカウント、読み込み中、accountError、getAccounts } } デフォルトのアカウント詳細をエクスポート;</pre></p>