vue.jsにて配列からランダムに取得したい

Question

export default {
  mixins: [common],
  data() {
    return {
     characters: [ 
        { name: "Lowercase", value: "abcdefghijklmnopqrstuvwxyz"},
        { name: "Uppercase", value: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"},
        { name: "Numbers",   value: "0123456789"},
     ],
   }
}
  methods: {
    makepassword() {
      for(var i = 0, len = this.characters[0].value.length; i < len; i++){
        var num = Math.floor(Math.random() * len); 
        var a = this.characters[0].value.charAt(num);
        // console.log(this.characters[0].value.charAt(num))
      }
      for(var i = 0, len = this.characters[1].value.length; i < len; i++){
        var num = Math.floor(Math.random() * len); 
        var b = this.characters[1].value.charAt(num);
      }
      for(var i = 0, len = this.characters[2].value.length; i < len; i++){
        var num = Math.floor(Math.random() * len); 
        var c = this.characters[2].value.charAt(num);
      }

      for(var i = 0, len = this.characters[0][1][2].value.length; i < len; i++){
        var num = Math.floor(Math.random() * len); 
        var d = this.characters[0][1][2].value.charAt(num);
        console.log(d)
      }

      var result = a+b+c+d;
      this.editedItem.password = result
}　

現在ランダムで8文字の英小文字・英大文字・数字のパスワードをランダムで生成する機能を実装しております。
ロジックとしては１.charactersの"Lowercase""Uppercase""Numbers"の中から一文字ずつランダムで取得
２.残りの5文字は三つの中からランダムで取得　３.集まった8文字をシャッフルする
という手順で実装しようとしています。

問題点

１.の１.charactersの"Lowercase""Uppercase""Numbers"の中から一文字ずつランダムで取得は実装出来たのですが、２.の残り5文字を"Lowercase""Uppercase""Numbers"の中から取得ができない状況です。　
for(var i = 0, len = this.characters[0][1][2].value.length; i < len; i++){
var num = Math.floor(Math.random() * len);
var d = this.characters[0][1][2].value.charAt(num);
console.log(d)
}
配列3つ全てを取得するというコードなのですが、どなたか分かる方いらっしゃいましたらヒントだけでもご教授していただけると嬉しく思います。
ご指摘よろしくお願いいたします。

Answer 1

いったん3種の文字列を全て連結させてみてはいかがでしょうか？

//for(var i = 0, len = this.characters[0][1][2].value.length; i < len; i++){
//  var num = Math.floor(Math.random() * len); 
//  var d = this.characters[0][1][2].value.charAt(num);
//  console.log(d)
//}

const all = this.characters[0].value + this.characters[1].value + this.characters[2].value;

for(var i = 0, len = all.length; i < len; i++){
  var num = Math.floor(Math.random() * len); 
  var d = all.charAt(num);
  console.log(d)
}

Comments

[leysxxk]

ありがとうございます。コンソールに上手く全て出力されました！
ただ、この場合
for(var i = 0, len = all.length; i < len; i++){
var num = Math.floor(Math.random() * len);
var d = all.charAt(num);
}
for(var i = 0, len = all.length; i < len; i++){
var num = Math.floor(Math.random() * len);
var e = all.charAt(num);
}
for(var i = 0, len = all.length; i < len; i++){
var num = Math.floor(Math.random() * len);
var f = all.charAt(num);
}
for(var i = 0, len = all.length; i < len; i++){
var num = Math.floor(Math.random() * len);
var g = all.charAt(num);
}
for(var i = 0, len = all.length; i < len; i++){
var num = Math.floor(Math.random() * len);
var h = all.charAt(num);
}
var result = a+b+c+d+e+f+g+h;
this.editedItem.password = result
このようにするしか方法はないですよね。
上手くまとめたいのですが、for文の中にfor文を回すという方法で試したのですが、上手くいきませんでした。。

[nekoniki]

allの中から要素を8回抜き出して結合するのなら

const len = all.length
let result = '';
for(var i = 0; i < 8; i++){
const num = Math.floor(Math.random() * len);
const str = all.charAt(num);
result += str;
}

でいいと思います。

[leysxxk]

無事実装完了いたしました、nekonikiさん本当にありがとうございました。