소개

Nuxt.js와 Vuetify, axios에서 qiita api 데이터를 검색하여 표시하고 페이지 네이션을 구현하고 분할하려고합니다.

nuxt.js에 대해 조금 아는 사람이라고 하는 사람을 향한 기사입니다. 전혀 모르면 힘들다고 생각합니다.
또 자신 자신도 nuxt를 할 수 있다는 것은 아니기 때문에 잘못되어 있는 곳이 있을지도 모르기 때문에, 참고 정도로 봐 주세요.

↓참고 사이트
【vue.js】 Vuetify로 간단 페이지 네이션(Paginations)

참고 이미지

버전

nuxt 2.0.0

@nuxtjs/axios 5.3.6

@nuxtjs/vuetify 1.0.0

쓰다

npx create-nuxt-app <プロジェクトの名前>

이제 만들겠지만, 여기서 Vuetify와 axios를 선택해 둡시다.

제작이 끝나면 axios에서 qiita api에서 가져옵니다. pages 안에 index.vue에 써 갑니다.

우선 script 태그 안에 씁니다.

pages/index.vue

export default {
  data(){
    return{
      page: 1,
      length:0,
      lists:[],
      viewLists: [],
      pageSize:10
    }
  },
  async asyncData({ app }) {
    const items = await app.$axios.$get('https://qiita.com/api/v2/items?query=tag:javascript&per_page=30')
    return{
      lists : items
    }
  }
}

배열의 lists 안에, qiita api로부터 받은 것을 모두 격납하는 프로그램입니다.
서버 측에서 받고 싶으므로 asyncdata 메서드를 사용합니다.
asyncData 메서드의 첫 번째 인수는 context를 받습니다.
context에는 app, route, store, params 등이 있으며, app는 axios, vue router, vue store 등의 모든 플러그인에 액세스 할 수 있습니다.

$get 메서드는 쿼리 매개 변수로,
tag:javascript -> 태그가 javascript인 것
per_page=30 -> 수신할 데이터 수가 30개
라고 지정합니다.

또한 data에 대해서
page란 페이지 번호, 1페이지째를 누르면 1, 2페이지째를 누르면 2가 됩니다.
length란 페이지네이션 시에 나오는 숫자의 개수 페이지수를 결정합니다.
lists는 qiita api에서받은 모든 것을 저장합니다.
viewLists에는 한 페이지에서 볼 수 있는 것을 저장합니다.
pageSize는 한 페이지에 표시 할 수있는 수를 정의합니다.

pages/index.vue

return {
  lists: items
}

여기 lists에 items를 저장합니다. this로 액세스 할 수없는 것 같습니다.

html 작성

pages/index.vue

<template>
  <div>
    <ul>
      <li v-for="item in this.viewLists" :key="item.id">
        <div>{{ item.title }}</div>
      </li>
    </ul>
    <v-pagination
      v-model="page"
      :length="length"
      @input = "pageChange"
    ></v-pagination>
  </div>
</template>

v-for에서 this.viewLists에 저장된 것을 반복적으로 표시하려고합니다.

v-pagenation 구성 요소 정보
v-model에서는 page를 참조합니다. 1페이지(1)를 누르면 data의 위치가 1, 2페이지(2)를 누르면 data의 위치가 2가 됩니다.
:length는 data의 length를 참조합니다. length로 페이지 수를 결정합니다.
input이라는 event는 methods에 정의 된 pageChange 이벤트를 참조합니다.

mounted라는 라이프사이클로 자동으로 페이지수를 결정하거나 어디에서 어디까지를 표시시킬지 결정

pages/index.vue

mounted: function(){
    this.length = Math.ceil(this.lists.length/this.pageSize);
    // listsの個数(30)/1ページで見れる数(10) ページ数を決める

    this.viewLists = this.lists.slice(0,this.pageSize);
    //受け取ったすべてのデータが格納されているlistsから、0からthis.pageSize(10)までをthis.viewListsに格納する どこからどこまでを表示するか決める
  },

페이지 번호를 변경했을 때, 표시하고 있는 데이터도 바꾸는 이벤트

pages/index.vue

methods:{
    pageChange( pageNumber ){
      this.viewLists = this.lists.slice(this.pageSize * (pageNumber - 1),this.pageSize * (pageNumber))
      // ページ番号2が押された場合　this.lists.slice(10,20) 10から20までを表示
      //最初のページ(1)の場合 this.lists.slice(0,10) 0から10までを表示
    }
}

첫 번째 인수의 pageNumber는 누른 페이지 번호를 받습니다. 페이지 번호의 3을 누르면 이 인수에는 3이 포함됩니다.

전체 코드

pages/index.vue

<template>
  <div>
    <ul>
      <li v-for="item in this.viewLists" :key="item.id">
        <div>{{ item.title }}</div>
      </li>
    </ul>
    <v-pagination
      v-model="page"
      :length="length"
      @input = "pageChange"
    ></v-pagination>
  </div>
</template>

<script>
export default {
  data(){
    return{
      page: 1,
      length:0,
      lists:[],
      viewLists: [],
      pageSize:10
    }
  },
  mounted: function(){
    this.length = Math.ceil(this.lists.length/this.pageSize);
    this.viewLists = this.lists.slice(0,this.pageSize);
  },
  async asyncData({ app }) {
    const items = await app.$axios.$get('https://qiita.com/api/v2/items?query=tag:javascript&per_page=30')
    return {
      lists : items
    }
  },
  methods:{
    pageChange( pageNumber ){
      this.viewLists = this.lists.slice(this.pageSize * (pageNumber - 1),this.pageSize * (pageNumber))
    }
  }
}
</script>

끝에

【vue.js】 Vuetify로 간단 페이지 네이션(Paginations) 라는 사이트를 참고로 했습니다.
정말 알기 쉬운 해설이므로 추천입니다.

여기까지 봐 주셔서 감사합니다.