Home  >  Q&A  >  body text

Solution to the problem of being unable to jump to another page when using laravel-Vue-pagination

<p>In a table, the data is being displayed, but when I click on the page number provided by Laravel Vue Pagination, it is showing me the same page number 1. Well, the main problem is that the page number is not passed into the function (Composable API). </p> <p><strong>Template form</strong></p> <pre class="brush:php;toolbar:false;"><table class="table table-striped table-bordered"> <thead> <th>SN</th> <th>Account Type</th> <th>Name</th> <th>Store name</th> <th>Address</th> <th>Contact number</th> <th>Email</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>The data from the Composable API is passed in:data, and the function (Composable) is also passed in @pagination-change-page.<strong>Script tag</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>Composable API</strong> In this function, I receive two parameters, and here is where Pagination (@pagination-change-page) should throw the page number! </p> <pre class="brush:php;toolbar:false;">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;</pre></p>
P粉598140294P粉598140294441 days ago611

reply all(1)I'll reply

  • P粉164942791

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

    Successfully working with Composition API Vue3
    Just remove the paginate parameter from getAccounts and don't pass paginates to the function.

    Updated code </>

    script

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

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

    reply
    0
  • Cancelreply