@programingBeginnerposted at 2022-03-12

vueでスライドショーを作りたい

Q&A

Closed

解決したいこと

vueでスライドショーを作ろうとしたのですが、画像が表示されず真っ白のままです。
setIntervalを使って数秒おきに画像を切り替えるスライドショーを作りたいです。
分かる方がいらっしゃればヒントを頂きたいです。
よろしくお願いいたします。

発生している問題・エラー

画像が表示されない

該当するソースコード

<div class="slide"><img :src="slide" alt="" class="slide-img" /></div>

setup() {
    const slideImgs = ref([
      require("@/assets/soccer.jpg"),
      require("@/assets/memorandum.png"),
      require("@/assets/MakeInfluencer.png"),
      require("@/assets/dram.jpg"),
      require("@/assets/programming.jpg"),
      require("@/assets/soccer2.jpg"),
    ]);

    let slide = ref("");
    let i = 0;
    const slideShow = () => {
      slide = slideImgs.value[i];
      i++;
      console.log(slide);
      console.log(i);
    };
    // slideShow();
    setInterval(slideShow, 10000);
    // setIntervalを消してその上のslideShow()を使うと写真の一枚目が表示される。

    return {
      slide,
    };
  },
});
</script>

自分で試したこと

1.setInterval(slideShow, 10000);をslideShow();に変えると画像の一枚目が表示された。
　→ パスや配列の表示方法は悪くないと思いました。

2.setInterval(slideShow, 10000)にしている状況で、コンソールに画像のパスと変数iが正常に表示された。→ setInterval関数は正常に動いており、数秒ごとのパスと変数iも正常であると思いました。

この２点から問題はsetInterval関数でDOMを書き換えるときはライフサイクルと関係してきて、それが原因で画像が表示されないのかなと考えています。また、setInterval関数は非同期関数なのでそれも関係するのかなと思いましたが、画像が10000msたっても表示されないので非同期は関係ないのかなと考えています。

Are you sure you want to delete the question?