无法跳转到另一页的问题在使用laravel-Vue-pagination时的解决方法

Question

在一个表格中，数据被显示出来，但是当我点击由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;

Answer 1

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