Vuetify で vue-tinybox を使う場合

経緯

v-img を使って、lazy で placeholder も表示させる対応に少し時間がかかったのでメモ。

• @nuxtjs/eslint-config": "^6.0.0"
• "@nuxtjs/vuetify": "^1.11.3"
• "nuxt": "^2.14.6"
• "vue-tinybox": "^1.3.0"

注意点

methods の genImages や randomInt ランダムの画像を表示させるものなので、あまり関係ないです。

お好きな画像を data の images に用意してください。

css も個人的に今回のケースで必要だった調整を入れているだけです。

重要なポイントは :keyに v-for のインデックスを入れること。

:key に v-for のインデックスをセットするのは良くないので、画像情報のオブジェクトに別途 rand として固有値をもたせているものを代入していた。

その流れで、@click="index = img.key" としていた。

しかし、vue-tinybox は :key にも index に代入する値も、
v-for のインデックスでないとだめらしい。

固有の値でも連番の数字なら行けるのかな?

コード

<template>
  <div class="inline-gallery">
    <Tinybox v-model="index" :images="images" />
    <v-row>
      <v-col
        v-for="(img, i) in images"
        :key="i"
        class="d-flex child-flex"
        cols="3">
        <v-img
          :src="img.thumbnail"
          :lazy-src="img.lazy"
          :alt="img.alt"
          aspect-ratio="1"
          class="grey lighten-2"
          @click="index = i">
          <template #placeholder>
            <v-row
              class="fill-height ma-0"
              align="center"
              justify="center">
              <v-progress-circular
                indeterminate
                color="grey lighten-5" />
            </v-row>
          </template>
        </v-img>
      </v-col>
    </v-row>
  </div>
</template>


<script>
export default {
  data () {
    return {
      index: null,
      images: []
    }
  },
  created () {
    this.genImages()
  },
  methods: {
    randomInt () {
      return Math.floor(Math.random() * (50 - 1)) + 1
    },
    genImages () {
      for (let i = 0; i < 4; i++) {
        const rand = this.randomInt()
        this.images.push({
          src: `https://picsum.photos/800?image=${rand}`,
          thumbnail: `https://picsum.photos/100?image=${rand}`,
          lazy: `https://picsum.photos/10?image=${rand}`,
          alt: `image-${rand}`,
          key: rand
        })
      }
    }
  }
}
</script>

<style lang="scss">
.inline-gallery {
  .col {
    padding: 16px;
  }
  .v-image {
    &:first-child {
       margin-left: 0!important;
    }
    &:last-child {
       margin-right: 0!important;
    }
  }
}
</style>