как создать vuejs unspla sh разбиение на страницы?

Question

Я пытаюсь создать галерею unspala sh API с vuejs.

Я сделал большую часть работы, но разбил на страницы. Я вижу, что есть ссылка, которая дает мне всю информацию о странице, но она в строковом формате

<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 из этой строки.

Заранее спасибо.

Answer 1

хорошо, я нашел решение. this.pagination = response.headers.link.split (","); поэтому он создаст массив из строки. теперь вы можете l oop этот массив и найти из него единственную ссылку с 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>