亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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

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

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;