vuejsのv-forの中身をランダムにしたい

スポンサーリンク
プログラミング

vuejsのv-forの中身をrandomにしたい

VuejSでv-forを使って複数のコンテンツを並べることってよくありますよね。

その時にそのコンテンツの順番をランダムにする方法を消化します

スポンサーリンク

v-forの並び順について

v-for は渡された配列をkey順に並べています。

なので、並びたい順番に配列を整形してあげると好きな順番に並べられます。

jsで配列をシャッフルする

フィッシャー–イェーツのシャッフルを使います。
この手法はO(n)なのでとても早く、かつ偏りがありません。なので配列のシャッフルの実装によく使われます。

shuffle: function(array) {
      for (let i = array.length - 1; i > 0; i--) {
        let r = Math.floor(Math.random() * (i + 1))
        let tmp = array[i]
        array[i] = array[r]
        array[r] = tmp
      }
      console.log(array)
      return array
    }

実装

See the Pen
random v-for
by nozo-moto (@nozo-moto)
on CodePen.

気をつけること

computedを使って実装すると、画像周りでおかしくなったので、mountedを使うべき

コメント

タイトルとURLをコピーしました