国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

laravel-Vue-pagination使用時(shí)に別のページにジャンプできない問(wèn)題の解決策
P粉598140294
P粉598140294 2023-08-28 16:12:34
0
1
759
<p>テーブルにデータが表示されていますが、Laravel Vue Pagination によって提供されるページ番號(hào)をクリックすると、同じページ番號(hào) 1 が表示されます。そうですね、主な問(wèn)題は、ページ番號(hào)が関數(shù) (コンポーザブル API) に渡されないことです。 </p> <p><strong>テンプレートフォーム</strong></p> <pre class="brush:php;toolbar:false;"><table class="テーブル テーブルストライプ テーブルボーダー"> <頭> SN <th>アカウントタイプ</th> <th>名前</th> <th>店舗名</th> 住所 連絡(luò)先番號(hào) <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 に渡され、関數(shù) (Composable) も @pagination-change-page に渡されます。<strong>スクリプト タグ</strong></p> <pre class="brush:php;toolbar:false;">import LaravelVuePagination from 'laravel-vue-pagination'; デフォルトのエクスポート { コンポーネント: { 'ページネーション': LaravelVueページネーション }、 設(shè)定() { } const ページネーション = ref(10); const { accounts, reading, getAccounts } = accountDetails();//コンポーザブル API onMounted(() => { getAccounts({paginate:paginate}); }); return { アカウント、読み込み中、getAccounts }; }、 };</pre> </p><p> <p><strong>コンポーザブル API</strong> この関數(shù)では 2 つのパラメーターを受け取ります。ここで、Pagination (@pagination-change-page) がページ番號(hào)をスローする必要があります。 </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 } } デフォルトのアカウント詳細(xì)をエクスポート;</pre></p>
P粉598140294
P粉598140294

全員に返信(1)
P粉164942791

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

更新されたコード </> ######腳本###### リーリー

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

最新のダウンロード
詳細(xì)>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート