【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」を使ってみることにしました。
どうにかこうにか導入。おおっ、動いた！
<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>これで五十肩がラクになりましたよ。本日はこれにて。
いいなと思ったら応援しよう！
