
前提
Vue3でFirestoreから取得してきたデータの配列を、変数で定義した配列に追加していきたいです。
実現したいこと
- 前提通り、xxxという名前の変数に配列を入れたい
発生している問題・エラーメッセージ
Uncaught (in promise) ReferenceError: xxx is not defined
該当のソースコード
js:xxxView.vue
1<template> 2 <div v-for="yyy in xxx" :key="yyy.name"> 3 {{ yyy.name }} 4 {{ yyy.number}} 5 </div> 6</template> 7 8<script> 9import db from "../firebase.js"; 10import { collection, getDocs} from "firebase/firestore"; 11export default { 12 data() { 13 return { 14 xxx: [{ 15 'number': Number, 16 'name': String 17 }] 18 /* xxxで入れたいこと 19 [ 20 {number => 0, name => 'a'} 21 {number => 1, name => 'b'} 22 ] 23 */ 24 }; 25 }, 26 mounted: async function () { 27 const hoge = await getDocs(collection(db, 'events', this.$route.params.id, 'subcollection')) 28 hoge.forEach((doc) => { 29 //console.log(this.xxx) 30 this.xxx[xxx.length] = doc.data() //ここでエラーが起きる 31 }) 32 }, 33}; 34</script>
試したこと
変数が定義されていないからという解説は見たのですが、data()で定義してあると思うので、なにが原因なのかさっぱり分かりません。
補足情報(FW/ツールのバージョンなど)
- Vue 3.2.25

this.xxx[xxx.length] はどのような意図なのでしょうか。
xxxという配列の最後の要素を、 doc.data() に置き換えたい、という意味でしょうか。
xxxという配列の最後に1個追加したいということになります。
こちらを参照しました。
https://www.javadrive.jp/javascript/array/index4.html#section1

回答1件
あなたの回答
tips
プレビュー