vue.jsにてdataの配列からボタン押下時に一文字取得する。

Question

export default {
  mixins: [common],
  data() {
    return {
     characters: [ 
        { name: "Lowercase", value: "abcdefghijklmnopqrstuvwxyz"},
        { name: "Uppercase", value: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"},
        { name: "Numbers",   value: "0123456789"},
     ],
   }
}
  methods: {
    makepassword() {
    　var str = 'abc'
     　 console.log(str.charAt(2))
      　console.log(this.characters.name.Lowercase.charAt(2))
}　

現在パスワード自動生成機能を作成しているのですが、data内の配列要素である、charactersの[Lowercase][Uppercase][Numbers]のvalue値から一文字ずつ値を取得しコンソールに表示させたいです。
varで定義したstrの方は正しくコンソールに表示されたのですが、**this.characters.name.Lowercase.charAt(2)**こちらは上手く表示されません。
書き方が間違えているのでしょうか？
分かる方いらっしゃいましたらヒントだけでも教えていただきたいです。
よろしくお願いします。

Answer 1

this.characters.nameは配列ですから、以下のように添え字で要素にアクセスする必要ががあります。

// 配列の１つ目の要素を取得
this.characters[0].name

次に、name.Lowercaseといったアクセスはできません。
nameとLowercaseはキーと値の関係であって、オブジェクトに対してnameというキーでアクセスした結果得られる値がLowercaseです。

そして、valueから値を取得したいのであれば、valueというキーでアクセスする必要があります。

this.characters[0].value // "abcdefghijklmnopqrstuvwxyz"

質問のように1文字づつ取り出したい場合にはforEachでループして出力するのがよいでしょう。

export default {
  mixins: [common],
  data() {
    return {
     characters: [ 
        { name: "Lowercase", value: "abcdefghijklmnopqrstuvwxyz"},
        { name: "Uppercase", value: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"},
        { name: "Numbers",   value: "0123456789"},
     ],
   }
}
  methods: {
    makepassword() {
    　var str = 'abc'
      console.log(str.charAt(2))
     this.characters.forEach((character) => {
       console.log(character.value.charAt(2))
     }
}　

Comments

[leysxxk]

とても分かりやすいご説明誠にありがとうございました、無事解決いたしました。
forEachの使い方も勉強になりました。
このまま実装頑張ります。