如何创建 vuejs unsplash 分页？答案

【问题标题】：how to create vuejs unsplash pagination?如何创建 vuejs unsplash 分页？
【发布时间】：2020-10-06 12:06:12
【问题描述】：

我正在尝试使用 vuejs 创建图库 unspalash API。

我完成了大部分部分，但在分页中堆叠。我看到有一个链接可以提供所有页面信息，但它是字符串格式

<https://api.unsplash.com/photos?order_by=popular&page=1&per_page=4>; rel="first", <https://api.unsplash.com/photos?order_by=popular&page=1&per_page=4>; rel="prev", <https://api.unsplash.com/photos?order_by=popular&page=45021&per_page=4>; rel="last", <https://api.unsplash.com/photos?order_by=popular&page=3&per_page=4>; rel="next"

数据为字符串格式。我如何在 vue 分页中显示它；我不知道。

我需要这个字符串中的 4 个按钮 First、Next、Previous、Last。

提前致谢。

【问题讨论】：

有谁想帮忙？

标签： api vue.js

【解决方案1】：

好的，我找到了解决方案。 this.pagination = response.headers.link.split(", "); 所以它将从字符串创建数组。现在您可以循环该数组并使用 rel=name 从中找到单个链接

<span class="red" v-for="pagi in pagination" v-bind:key="pagi.id">
      <button
        v-if="pagi.includes('first')"
        class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow mr-3"
        v-on:click="fetchPaginateNews(pagi.split('; ')[0])"
      >First</button>
      <button
        v-if="pagi.includes('next')"
        class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow mr-3"
        v-on:click="fetchPaginateNews(pagi.split('; ')[0])"
      >Next</button>
      <button
        v-if="pagi.includes('prev')"
        class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow mr-3"
        v-on:click="fetchPaginateNews(pagi.split('; ')[0])"
      >Prevous</button>
      <button
        v-if="pagi.includes('last')"
        class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow mr-3"
        v-on:click="fetchPaginateNews(pagi.split('; ')[0])"
      >Last</button>

【讨论】：