変数を定義している(?)のに、xxx is not definedとエラーが出る

Question

前提

Vue3でFirestoreから取得してきたデータの配列を、変数で定義した配列に追加していきたいです。

実現したいこと

• 前提通り、xxxという名前の変数に配列を入れたい

発生している問題・エラーメッセージ

Uncaught (in promise) ReferenceError: xxx is not defined

該当のソースコード

<template>
    <div v-for="yyy in xxx" :key="yyy.name">
        {{ yyy.name }}
        {{ yyy.number}}
    </div>
</template>

<script>
import db from "../firebase.js";
import { collection, getDocs} from "firebase/firestore";
export default {
  data() {
    return {
      xxx: [{
        'number': Number,
        'name': String
      }]
      /* xxxで入れたいこと
      [
          {number => 0, name => 'a'}
          {number => 1, name => 'b'}
      ]
      */
    };
  },
  mounted: async function () {
        const hoge = await getDocs(collection(db, 'events', this.$route.params.id, 'subcollection'))
        hoge.forEach((doc) => {
            //console.log(this.xxx)
            this.xxx[xxx.length] = doc.data() //ここでエラーが起きる
        })
  },
};
</script>

試したこと

変数が定義されていないからという解説は見たのですが、data()で定義してあると思うので、なにが原因なのかさっぱり分かりません。

補足情報（FW/ツールのバージョンなど）

• Vue 3.2.25

Comments

[退会済みユーザー]

this.xxx[xxx.length] はどのような意図なのでしょうか。
xxxという配列の最後の要素を、 doc.data() に置き換えたい、という意味でしょうか。

[akarisano]

xxxという配列の最後に1個追加したいということになります。
こちらを参照しました。
https://www.javadrive.jp/javascript/array/index4.html#section1

Answer 1

こういうことでしょうか。

// this.xxx[xxx.length] = doc.data()
//             ↓
   this.xxx[this.xxx.length] = doc.data()

Comments

[akarisano]

kei344様
迅速なご回答ありがとうございます。
lengthのところにもthisが必要ということだったのですね…