laravel-Vue-pagination使用時に別のページにジャンプできない問題の解決策

Question

テーブルにデータが表示されていますが、Laravel Vue Pagination によって提供されるページ番号をクリックすると、同じページ番号 1 が表示されます。そうですね、主な問題は、ページ番号が関数 (コンポーザブル API) に渡されないことです。

テンプレートフォーム

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

Composable API からのデータは:data に渡され、関数 (Composable) も @pagination-change-page に渡されます。スクリプト タグ

import LaravelVuePagination from 'laravel-vue-pagination';

デフォルトのエクスポート {
    コンポーネント: {
        'ページネーション': LaravelVueページネーション
    }、
  設定（） {
    }
    const ページネーション = ref(10);
    const { accounts, reading, getAccounts } = accountDetails();//コンポーザブル API
    onMounted(() => {
      getAccounts({paginate:paginate});
    });

    return { アカウント、読み込み中、getAccounts };
  }、
};

コンポーザブル API この関数では 2 つのパラメーターを受け取ります。ここで、Pagination (@pagination-change-page) がページ番号をスローする必要があります。

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 }
}
デフォルトのアカウント詳細をエクスポート;

Answer 1

Composition API Vue3 の使用に成功しました
getAccounts から paginate パラメーター を削除し、関数にページネーションを渡さないようにしてください。

更新されたコード </> ＃＃＃＃＃＃脚本＃＃＃＃＃＃ リーリー

コンポーザブル API リーリー