CODEWITHSUNDEEP
vue.jspaginationaxiostokenlaravel-5.6
Sajid Latif
Sajid Latif

Reputation: 119

VUE: Issues with fetching data when I use Pagination

I have a a set of data which I can access for the first page. But as soon as I use the pagination and trying to press next page, then I can't access the data. I get the 401 issue.

created(){
          this.fetchNotater();
        },
        methods: {
            fetchNotater(page_url){
                let vm = this;

// api/borgernotater works perfectly. But when I use the page_url then it won't accept my api_token

                page_url = page_url || 'api/borgernotater'; 
                fetch(`${page_url}?api_token=${window.Laravel.apiToken}`)
                    .then(res => res.json())
                    .then(res => {
                        this.notater = res.data;
                        vm.makePagination(res);
                    })
                    .catch(err => console.log(err))
            },
            makePagination(res){
                let pagination = {
                    current_page: res.current_page,
                    last_page: res.last_page,
                    next_page_url: res.next_page_url,
                    prev_page_url: res.prev_page_url
                };
                this.pagination = pagination;
            }

enter image description here

enter image description here

Upvotes: 1

Views: 483

Answers (1)

Terry
Terry

Reputation: 66228

You have a typo in your API request URL construction: parameters need to be separated with &. You can see that when you are requesting page 2, you have two questions marks in your URL and that’s an invalid query string, and the API request URL will not be parsed correctly. It should be: ?page=2&api_key=....

With that in mind, it might be helpful to use a third party library, like query-string on NPM, to perform parsing and adding payload to your query string.

Upvotes: 1

Related Questions