vue.js - VUE：使用分页时获取数据的问题

Question

我有一组可以访问第一页的数据。但是一旦我使用分页并尝试按下一页，我就无法访问数据。我得到了 401 问题。

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

标签： vue.jspaginationaxiostokenlaravel-5.6

Answer 1

您的 API 请求 URL 构造中有错字：参数需要用&. 可以看到，在请求第 2 页时，您的 URL 中有两个问号，这是一个无效的查询字符串，API 请求 URL 将不会被正确解析。应该是：?page=2&api_key=...。

考虑到这一点，使用第三方库（如 NPM 上的查询字符串）来执行解析并将有效负载添加到查询字符串可能会有所帮助。