时间戳

首页 > 解决方案 > 如何创建 vuejs unsplash 分页？

api - 如何创建 vuejs unsplash 分页？

问题描述

我正在尝试使用 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。

提前致谢。

标签： apivue.js

解决方案

好的，我找到了解决方案。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>

推荐阅读