如何使用 vuejs 过滤 laravel api 分页

Question

好的，所以我使用 Laravel 的 api 资源分页，它给了我如下结构：

{
   current_page: 1,
   data: [
      {
         some data
      },
      {
         somedata
      }
   ],
   first_page_url: "http://localhost:8000/api/accommodation?page=1",
   from: 1,
   last_page: 3,
   last_page_url: "http://localhost:8000/api/accommodation?page=3",
   next_page_url: "http://localhost:8000/api/accommodation?page=2",
   path: "http://localhost:8000/api/accommodation",
   per_page: 2,
   prev_page_url: null,
   to: 2,
   total: 5
}

现在，如果我想为我的 api 编写一个过滤器来搜索其中的内容，并且我想在所有 api 中搜索而不仅仅是第一页，该怎么做呢？我应该将所有内容存储在 vuejs 中还是进行反应然后过滤，或者有什么方法可以读取所有数据，甚至我不应该使用 laravel 分页，因为它可能会给前端带来麻烦？

Answer 1

当您使用 laravel 进行分页时，它会获取请求中存在的所有参数。所以你必须提出这样的要求：

http://localhost:8000/api/accommodation?page=1&filter1=blabla&filter2=blabla

然后您的应用程序将收到如下结果：

    {
   current_page: 1,
   data: [
      {
         some data
      },
      {
         somedata
      }
   ],
   first_page_url: "http://localhost:8000/api/accommodation?page=1&filter1=blabla&filter2=blabla",
   from: 1,
   last_page: 3,
   last_page_url: "http://localhost:8000/api/accommodation?page=3&filter1=blabla&filter2=blabla",
   next_page_url: "http://localhost:8000/api/accommodation?page=2&filter1=blabla&filter2=babla",
   path: "http://localhost:8000/api/accommodation",
   per_page: 2,
   prev_page_url: null,
   to: 2,
   total: 5
}

但是，在我看来，如果您的数据库中有很多行，则必须进行分页。如果不是这样，我更喜欢对我的 api 进行唯一调用，它获取所有行，然后在前端动态过滤（例如使用 js 过滤器）。假设大约 100 行......（但它也可以取决于其他参数）。

对你来说更清楚了吗？