v-forでランダムに配列から文字列を出力したい

Question

Vue.js初学者です。
v-forを用いて配列をランダムに表示したいです。

<div id="app">
<span v-for="n in 5" >{{random}}</span>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    randon = 0;
  },
  var ary = ['1','2','3','4','5','6'];
  this.random = ary[Math.floor(Math.random() * ary.length)];
})
</script>

のように書いて配列からランダムに5個表示させる（重複は可）で表示させるプログラムを書きたいのですが、ここから先どう書けばいいかがわかりません。
ご教授のほどよろしくお願いします。

Answer 1

Vue.js以前の問題として、JavaScriptの文法がすでにいろいろおかしいです。まずはそちらから勉強されたほうが良いでしょう。

##JavaScriptの文法誤り箇所
まず、8~10行目、

data: {
  randon = 0;
}

ですが、オブジェクトリテラル({ ～ })内のプロパティ宣言は、key:valueという形式で記述する必要があります。
つまり、

data: {
  random : 0
}

が正しいでしょう。

つづいて11～12行目、こちらもオブジェクトリテラル内ですので、やはりkey:valueという形式でのプロパティ宣言しかできません。
ここは正直何をしたいのかよくわからないので、修正コードは書けませんが……

##Vue.js の書き方
2行目の{random} 部分は、Vue オブジェクトの random という値を取得する、という表記になっています。これでは、JavaScript でどういう処理をしようと、同じ値が5回出現します。

なので、ここは特定の値を取得するのではなく、ループの度に値を計算するように書き換えましょう。
スクリプトで random 関数を Vue インスタンスに登録するとして、 HTML 側の表記は以下になります。

<div id="app">
  <span v-for="n in 5" >{{random()}}</span>
</div>

スクリプト側では、以下のようにして random() メソッドを Vue インスタンスに登録します。

new Vue({
  methods:{
    'random': function(){
      const rnd = Math.floor(Math.random() * this.ary.length);
      return this.ary[rnd];
    }
  }
})

メソッド内で利用しているthis.aryが設定されていないので、これはデータとして登録します。
先ほどと同様に、Vue コンストラクタに

new Vue({
  data: {
    ary: ['1','2','3','4','5','6']
  },
})

とします（実際には、先ほどの methods 登録と一緒に data を登録します）。

##コード全文
上記をふまえ、ご質問の内容を実現するには、

<div id="app">
  <span v-for="n in 5" >{{random()}}</span>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      ary: ['1','2','3','4','5','6']
    },
    methods:{
      'random': function(){
        const rnd = Math.floor(Math.random() * this.ary.length);
        return this.ary[rnd];
      }
    }
  })
</script>

というコードが必要になります（もちろん他のアプローチもあります）。

Comments

[1042limit]

丁寧にご説明していただきありがとうございます。
参考になりました。
これを参考にもう少し理解を深めていきたいと思います。

Answer 2

まず、vue.jsを触る前にJavaScriptで配列の中身がランダムで出力される関数を作成するところから始めることをおすすめします。
vue.jsは変数の持ち方、thisの持ち方、関数の持ち方、returnの持ち方、変数の持ち方など、vue.jsのみならずjsフレームワークは所謂JavaScriptの総合格闘技です。

今回のプログラム内容

1. vue.jsの算出プロパティ(computed)を使用しています。
2. 算出プロパティの中ではaryの回数分だけランダム関数の中身が実行されます。
3. その結果をランダム関数の中で新たに作成した配列の中に追加してきます。
4. htmlのv-forではn in 関数にしています(ココらへんがreturnが理解していないと難しいです)。

関数の中にはランダム関数の中で新たに作成した配列が入っております。
5. n in random(numArry) が {{ n }} 配列数だけ出力されます。

サンプルを作成したのでご確認ください。
動くサンプル

<div id="app">
  <span v-for="n in random">{{ n }} </span>
</div>

var app = new Vue({
  el: '#app',
  data: {
    ary: [1, 2, 3, 4, 5],
    numArray: ''
  },
  computed: {
  	random: function () {
    	let numArray = []
    	this.ary.forEach(num => {
      	numArray.push(this.ary[Math.floor(Math.random() * num)])
      })
      return numArray
    }
  }
})

Comments

[1042limit]

丁寧にご説明していただきありがとうございます。
参考になりました。
これを参考にもう少し理解を深めていきたいと思います。

Answer 3

配列からランダムに任意の個数取り出す関数を書いてみました。これを使ってみてください。

あと文法が色々と間違ってるので JavaScript をもう少し勉強してから Vue.js の勉強を進めたほうが良いかなと思います。

function getRandomArray(ary, length) {
  return Array.apply(null, Array(Math.min(length, ary.length))).map(function () {
    const randomIndex = Math.floor(Math.random() * ary.length);
    
    return ary.splice(randomIndex, 1)[0];
  });
}

data: function() {
  return {
    ary: ['1','2','3','4','5','6'],
  };
},

computed: {
  random: function () {
    return getRandomArray(this.ary, 5);
  },
},

<span
  v-for="n in random"
  :key="n">
  {{ n }}
</span>