无法跳转到另一页的问题在使用laravel-Vue-pagination时的解决方法
P粉598140294
P粉598140294 2023-08-28 16:12:34
[PHP讨论组]

在一个表格中,数据被显示出来,但是当我点击由Laravel Vue分页提供的页码时,它显示给我相同的页码1。嗯,主要问题是页码没有传递到函数(Composable API)中。

模板表格

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

在:data中传递了来自Composable API的数据,在@pagination-change-page中也传递了函数(Composable)。 脚本标签

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

可组合 API 在这个函数中,我接收了两个参数,这里是Pagination(@pagination-change-page)应该抛出页码的地方!

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

P粉598140294
P粉598140294

全部回复(1)
P粉164942791

成功使用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;
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号