【vue-awesome-swiper】画像を配列にしてv-forでグルグル回したら五十肩がラクになった

2021.7.21追記「本番環境でエラーになっちゃったら<client-only>で囲うといいかもしれない」

表記のとおりです。
おばちゃんの設定はSSGです。開発環境ではエラーも出ず問題なかったのですが、なんと本番環境で画像がスライダーにならず、表示がおかしなことになりました。

急ぎ、vue-awesome-swiperの箇所（<swiper></swiper>）を<client-only></client-only>で囲みました。

おばちゃんの場合、これで大丈夫でした。もし、本番環境で問題が出たとき「<client-only>で囲う」という方法も解決の一助となりましたら幸いです。

（以下、元記事）

Webサイトにスライダー。
おばちゃんも、Nuxt.js製のWebサイトで「vue-awesome-swiper」を使ってみることにしました。

surmon-china/vue-awesome-swiper

vue-awesome-swiper | Homepage | Surmon's projects

どうにかこうにか導入。おおっ、動いた！

<template>
 <section>
   <div class="container">
     <swiper :options="swiperOptions">
       <swiper-slide>
         <nuxt-link to="/page01">
           <picture>
             <source srcset="/img/photo01.webp" type="image/webp" />
             <img
               src="/img/photo01.jpg"
               width="600"
               height="400"
               class="slide_img"
             />
           </picture>
         </nuxt-link>
       </swiper-slide>

       <swiper-slide>
         <nuxt-link to="/page02">
           <picture>
             <source srcset="/img/photo02.webp" type="image/webp" />
             <img
               src="/img/photo02.jpg"
               width="600"
               height="400"
               class="slide_img"
             />
           </picture>
         </nuxt-link>
       </swiper-slide>

       <div slot="button-prev" class="swiper-button-prev"></div>
       <div slot="button-next" class="swiper-button-next"></div>
     </swiper>
   </div>
 </section>
</template>

<script>
export default {
 data() {
   return {
     swiperOptions: {
       loop: true,
       navigation: {
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
       },
     },
   }
 },
}
</script>

よし、これで<swiper-slide>の部分をコピペして、スライドさせる画像を増やせばオッケーね。今回の場合は１５枚・・・

齢５０過ぎともなると、マウスを使ったコピー＆ペーストの微妙な指使いが肩こりの痛みを強くする。同じような繰り返しのソースコードを凝視するのもドライアイにはキツかった。

・・・もっとラクしたい。

そういえば、この動作ってば繰り返し。プログラミングあるあるで、たいがい if, for, 変数, 配列ら辺から始めるから、おばちゃんもこの辺りはうっすらとわかる。そしてNuxt.js(Vue.js)にはv-forがある。よっしゃ、スライド（画像とリンク）を配列にしてv-forでグルグル回すぞ！

<template>
 <section>
   <div class="container">
     <swiper :options="swiperOptions">
       <swiper-slide v-for="slideImage in slideImages" :key="slideImage.id">
         <nuxt-link :to="slideImage.link">
           <picture>
             <source
               :srcset="'/img/' + slideImage.url + '.webp'"
               type="image/webp"
             />
             <img
               :src="'/img/' + slideImage.url + '.jpg'"
               width="600"
               height="400"
               class="slide_img"
             />
           </picture>
         </nuxt-link>
       </swiper-slide>

       <div slot="button-prev" class="swiper-button-prev"></div>
       <div slot="button-next" class="swiper-button-next"></div>
     </swiper>
   </div>
 </section>
</template>

<script>
export default {
 data() {
   return {
     slideImages: [
       {
         link: '/page01',
         url: 'photo01',
       },
       {
         link: '/page02',
         url: 'photo02',
       },
       {
         link: '/page03',
         url: 'photo03',
       },
     ],
     swiperOptions: {
       loop: true,
       navigation: {
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
       },
     },
   }
 },
}
</script>

これで五十肩がラクになりましたよ。本日はこれにて。