AwadGorg's avatar

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 == '&laquo; Previous'"
        >
          &lsaquo;
        </span>
        <span
          class="page-link disabled"
          aria-disabled="true"
          v-else-if="link.label == 'Next &raquo;'"
        >
          <nuxt-link :to="'link.next_page_url'" class="text-dark">
            &rsaquo;
          </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

0 likes
0 replies

Please or to participate in this conversation.