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を使うべき