Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (12) 写真一覧ページ

<template>
  <div class="photo">
    <figure class="photo__wrapper">
      <img
        class="photo__image"
        :src="item.url"
        :alt="`Photo by ${item.owner.name}`"
      >
    </figure>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

<template>
  <div class="photo">
    <figure class="photo__wrapper">
      <!-- 中略 -->
    </figure>
    <RouterLink
      class="photo__overlay"
      :to="`/photos/${item.id}`"
      :title="`View the photo by ${item.owner.name}`"
    >
    </RouterLink>
  </div>
</template>

<template>
  <div class="photo">
    <figure class="photo__wrapper">
      <!-- 中略 -->
    </figure>
    <RouterLink
      class="photo__overlay"
      :to="`/photos/${item.id}`"
      :title="`View the photo by ${item.owner.name}`"
    >
      <div class="photo__controls">
        <button
          class="photo__action photo__action--like"
          title="Like photo"
        >
          <i class="icon ion-md-heart"></i>12
        </button>
      </div>
    </RouterLink>
  </div>
</template>

<button
  class="photo__action photo__action--like"
  title="Like photo"
>
  <i class="icon ion-md-heart"></i>12
</button>
<a
  class="photo__action"
  title="Download photo"
  @click.stop
  :href="`/photos/${item.id}/download`"
>
  <i class="icon ion-md-arrow-round-down"></i>
</a>

<div class="photo__controls">
  <!-- いいねとダウンロードボタン -->
</div>
<div class="photo__username">
  {{ item.owner.name }}
</div>

<template>
  <div class="photo-list">
    <div class="grid">
      <Photo
        class="grid__item"
        v-for="photo in photos"
        :key="photo.id"
        :item="photo"
      />
    </div>
  </div>
</template>

<script>
import Photo from '../components/Photo.vue'

export default {
  components: {
    Photo
  },
  data () {
    return {
      photos: []
    }
  }
}
</script>

import { OK } from '../util'
import Photo from '../components/Photo.vue'

export default {
  components: {/* 中略 */},
  data: {/* 中略 */},
  methods: {
    async fetchPhotos () {
      const response = await axios.get('/api/photos')

      if (response.status !== OK) {
        this.$store.commit('error/setCode', response.status)
        return false
      }

      this.photos = response.data.data
    }
  },
  watch: {
    $route: {
      async handler () {
        await this.fetchPhotos()
      },
      immediate: true
    }
  }
}

$ npm run watch

/
/?page=2
/?page=3

/api/photos/?page=2

{
  path: '/',
  component: PhotoList,
  props: route => {
    const page = route.query.page
    return { page: /^[1-9][0-9]*$/.test(page) ? page * 1 : 1 }
  }
}

<template>
  <div class="pagination">
    <RouterLink
      v-if="! isFirstPage"
      :to="`/?page=${currentPage - 1}`"
      class="button"
    >&laquo; prev</RouterLink>
    <RouterLink
      v-if="! isLastPage"
      :to="`/?page=${currentPage + 1}`"
      class="button"
    >next &raquo;</RouterLink>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    lastPage: {
      type: Number,
      required: true
    }
  },
  computed: {
    isFirstPage () {
      return this.currentPage === 1
    },
    isLastPage () {
      return this.currentPage === this.lastPage
    }
  }
}
</script>

props: {
  page: {
    type: Number,
    required: false,
    default: 1
  }
},

import { OK } from '../util'
import Photo from '../components/Photo.vue'
import Pagination from '../components/Pagination.vue' // ★ 追加

export default {
  components: {
    Photo,
    Pagination // ★ 追加
  },
  /* 以下略 */

data () {
  return {
    photos: [],
    currentPage: 0,
    lastPage: 0
  }
},

async fetchPhotos () {
  const response = await axios.get(`/api/photos/?page=${this.page}`)

  /* 中略 */

  this.photos = response.data.data
  this.currentPage = response.data.current_page
  this.lastPage = response.data.last_page
}

<div class="photo-list">
  <div class="grid">
    <!-- 中略 -->
  </div>
  <Pagination :current-page="currentPage" :last-page="lastPage" />
</div>

protected $perPage = 15; // この値を少なくすれば動作確認しやすいですね

const router = new VueRouter({
  mode: 'history',
  scrollBehavior () {
    return { x: 0, y: 0 }
  },
  routes
})