Oct 31, 2020
0
Level 2
Vuejs Laravel Pagination
Hello, am building this app to learn how to work with NUXTJS and am kind of stuck on how can i make pagination using nuxtjs(vuejs) with laravel i already made an api with laravel that return data using paginate, here is the code am using right now and it's not working,
<template>
<div v-if="browsergames_list.last_page > 1">
<ul class="pagination">
<li
class="page-item font-weight-bold ml-2"
v-for="(link, index) in browsergames_list.links"
:key="index"
aria-current="page"
:title="'Page ' + link.label"
>
<span
class="page-link active"
aria-disabled="true"
v-if="link.label == browsergames_list.current_page"
>
{{ browsergames_list.current_page }}
</span>
<span
class="page-link disabled"
aria-disabled="true"
v-else-if="link.url == null && link.label == '« Previous'"
>
‹
</span>
<span
class="page-link disabled"
aria-disabled="true"
v-else-if="link.label == 'Next »'"
>
<nuxt-link :to="'link.next_page_url'" class="text-dark">
›
</nuxt-link>
</span>
<span class="page-link" v-on:click="updateGames(link.label)"
v-else>
<nuxt-link :to="'?page='+link.label" class="text-dark"
>
{{ link.label }}
</nuxt-link>
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['browsergames_list'],
methods: {
updateGames(page){
Promise.all([
this.$store.dispatch('browsergames/browsergamesListPagination', page)
])
}
}
}
</script>
the above is the pagination component, I have method updateGames that should be triggered when clicked on a link, and it should dispatch an action browsergamesListPagination and here is the vuex code
export default {
state: () => ({
browsergames_list: []
}),
mutations: {
GET_GAMES(state, browsergames){
state.browsergames_list = browsergames;
}
},
actions: {
async browsergamesList ({commit}){
await this.$axios.get('/api/browsergames-list').then((res) => {
commit('GET_GAMES', res.data);
});
},
async browsergamesListPagination ({commit}, page){
await this.$axios.get('/api/browsergames-list?page='+page
).then((res) => {
commit('GET_GAMES', res.data);
});
}
}
}
the code above return this error for me
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘http://localhost:8000/api/browsergames-list?page=2’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).
i want to know am i using the right way to do pagination. and why am i getting the error above and thanks a lot for the help
Please or to participate in this conversation.