首頁  >  問答  >  主體

無法跳到另一頁的問題在使用laravel-Vue-pagination時的解決方法

<p>在一個表格中,數據被顯示出來,但是當我點擊由Laravel Vue分頁提供的頁碼時,它顯示給我相同的頁碼1。嗯,主要問題是頁碼沒有傳遞到函數(Composable API)。 </p> <p><strong>範本表格</strong></p> <pre class="brush:php;toolbar:false;"><table class="table table-striped table-bordered"> <thead> <th>SN</th> <th>帳號類型</th> <th>姓名</th> <th>店名</th> <th>地址</th> <th>聯絡電話</th> <th>電子郵件</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>在:data中傳遞了來自Composable API的數據,在@pagination-change-page中也傳遞了函數(Composable)。<strong>腳本標籤</strong></p> <pre class="brush:php;toolbar:false;">import LaravelVuePagination from 'laravel-vue-pagination'; export default { components: { 'Pagination': LaravelVuePagination }, setup() { } const paginates = ref(10); const { accounts, loading, getAccounts } = accountDetails();//Composables API onMounted(() => { getAccounts({paginate:paginates}); }); return { accounts, loading,getAccounts }; }, };</pre> </p><p> <p><strong>可組合 API</strong> 在這個函數中,我接收了兩個參數,這裡是Pagination(@pagination-change-page)應該拋出頁碼的地方! </p> <pre class="brush:php;toolbar:false;">import { ref } 從 '@vue/reactivity'; import axios from 'axios'; const accountDetails = () => { const accounts = ref({}); const loading = ref(true); const accountError = ref({}); const getAccounts = async ({page=1,paginate}) => { await axios.get('api/account/getAccounts?page=' page 'paginate=' paginate, { 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;</pre></p>
P粉598140294P粉598140294441 天前615

全部回覆(1)我來回復

  • P粉164942791

    P粉1649427912023-08-29 00:48:39

    成功使用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;

    回覆
    0
  • 取消回覆