【Vue.js】Firestoreからデータ取得したいです。

#Firestoreからデータ取得したいです。

Firestoreに下記記述にてデータを格納することは実装できていますが、
同じページ内にてデータを取得したいのですがうまく出来ない状況です。

###データ格納

firebase
        .firestore()
        .collection("users")
        .add({
          name: this.name,
          sex: this.sex,
          age: this.age,
          selfpr: this.selfpr,
          profession: this.profession,
          uploadedImage: this.uploadedImage,
          genre: this.genre,
        });

###データ取得

export default {
  data() {
    return {
    allData: [],
    }
  },
 created() {
    firebase
      .firestore()
      .collection("users")
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          this.allData.push(doc.data());
        });
      });

Firestoreよりデータを取得したものをallDataに格納して
それぞれ{{ allData.name }}のように取得しているのですが、取得がうまくいっていないようです。
しかし、何度も見直しているのですが、わからない状況で行き詰まっています。

わかる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願いいたします。

#実際のコード

html
1<template>
2  <div>
3    <Header />
4    <div class="mypage flex">
5      <div class="mypage-inner flex">
6        <div class="profile-inner flex">
7          <img
8            class="profile-inner-img"
9            src="../assets/アイコン.jpg"
10            alt="デフォルト画像"
11          />
12          <div class="profile-inner-name">{{ allData.name }}</div>
13        </div>
14        <div class="profile-inner2 flex">
15          <div class="follow-inner">
16            <div class="post">
17              <div>0</div>
18              <p>POSTS</p>
19            </div>
20            <div class="follow">
21              <div>0</div>
22              <p>FOLLOW</p>
23            </div>
24            <div class="follower">
25              <div>0</div>
26              <p>FOLLOWER</p>
27            </div>
28          </div>
29          <hr class="separate" />
30          <button
31            @click="
32              show();
33              openModal();
34            "
35            class="profile-edit flex"
36          >
37            プロフィール編集
38          </button>
39        
40      ~  省略 ~
41
42        </div>
43      </div>
44      <div class="profile-list">
45        <ul class="list-item">
46          <li class="list-item">性別：{{ allData.sex }}</li>
47          <li class="list-item">年齢：{{ allData.age }}</li>
48          <li class="list-item">職業：{{ allData.professions }}</li>
49          <li class="list-item">居住地：</li>
50          <li class="list-item">好きな映画：</li>
51          <li class="list-item">好きなジャンル：{{ allData.genre }}</li>
52          <li class="list-item">自己紹介：{{ allData.selfpr }}</li>
53        </ul>
54      </div>
55      <hr class="separate" />
56      <div class="profile-post flex">
57        <h3>{{ allData.name }}の投稿一覧</h3>
58      </div>
59    </div>
60  </div>
61</template>
62

js
1export default {
2  data() {
3    return {
4      name: "",
5      sex: "",
6      sexs: [{ name: "男性" }, { name: "女性" }, { name: "その他" }],
7      age: "",
8      ages: [
9        { name: "10際未満" },
10        { name: "10 ~ 19歳" },
11        { name: "20 ~ 29歳" },
12        { name: "30 ~ 39歳" },
13        { name: "40 ~ 49歳" },
14        { name: "50 ~ 59歳" },
15        { name: "60 ~ 69歳" },
16        { name: "70 ~ 79歳" },
17        { name: "80際以上" },
18      ],
19      profession: "",
20      professions: [
21        { name: "公務員" },
22        { name: "会社員" },
23        { name: "自営業" },
24        { name: "フリーランス" },
25        { name: "パート・アルバイト" },
26        { name: "専業主婦" },
27        { name: "学生" },
28        { name: "その他" },
29      ],
30      selfpr: "",
31      genre: "",
32      genres: [
33        { id: 0, name: "ジャンル" },
34        { id: 1, name: "アクション" },
35        { id: 2, name: "ドラマ" },
36        { id: 3, name: "恋愛" },
37        { id: 4, name: "ホラー" },
38        { id: 5, name: "戦争" },
39      ],
40      uploadedImage: "",
41      allData: [],
42      open: false,
43    };
44  },
45  components: {
46    Header,
47  },
48  methods: {
49    // postItem()
50    updateBtn() {
51      firebase
52        .firestore()
53        .collection("users")
54        .add({
55          name: this.name,
56          sex: this.sex,
57          age: this.age,
58          selfpr: this.selfpr,
59          profession: this.profession,
60          uploadedImage: this.uploadedImage,
61          genre: this.genre,
62        });
63      this.$swal({
64        title: "内容確認",
65        text: "この内容で投稿しますか？",
66        icon: "info",
67        buttons: true,
68        dangerMode: true,
69      }).then((willDelete) => {
70        if (willDelete) {
71          this.$swal("投稿しました。", {
72            icon: "success",
73          });
74        } else {
75          this.$swal("キャンセルしました。");
76        }
77      });
78    },
79    show: function() {
80      this.$modal.show("edit");
81    },
82    hide: function() {
83      this.$modal.hide("edit");
84    },
85    openModal() {
86      this.open = true;
87    },
88    closeModal() {
89      this.open = false;
90    },
91  },
92  created() {
93    firebase
94      .firestore()
95      .collection("users")
96      .get()
97      .then((snapshot) => {
98        snapshot.forEach((doc) => {
99          this.allData.push(doc.data());
100        });
101      });
102  },

行動規範の内容に同意します

回答1件

ベストアンサー

allDataに格納しているのは複数の情報が格納されたオブジェクトならば、
テンプレート上で展開する際はv-forディレクティブでループしないと個々の値を取得できないですよ。

vue
1<template v-for="data in allData">
2<div class="profile-list">
3        <ul class="list-item">
4          <li class="list-item">性別：{{ data.sex }}</li>
5          <li class="list-item">年齢：{{ data.age }}</li>
6          <li class="list-item">職業：{{ data.professions }}</li>
7          <li class="list-item">居住地：</li>
8          <li class="list-item">好きな映画：</li>
9          <li class="list-item">好きなジャンル：{{ data.genre }}</li>
10          <li class="list-item">自己紹介：{{ data.selfpr }}</li>
11        </ul>
12      </div>
13      <hr class="separate" />
14      <div class="profile-post flex">
15        <h3>{{ data.name }}の投稿一覧</h3>
16      </div>
17　</div>
18</template>