未分類

Vue3でsetup script 内でfirestoreから読み込んだ場合に、template内が表示されない問題。


<template>
  <div>{{ nameRef }}</div>
</template>

<script setup lang="ts">
import {ref} from "vue";

import { firebaseApp } from "../firebase/config";
import { getFirestore, getDocs, collection } from "firebase/firestore";
import {ref} from "vue";
const db = getFirestore(firebaseApp);

const nameRef = ref("");

const querySnapshot = await getDocs(collection(db, "test"));
const testList: string[] = [];
querySnapshot.forEach((doc) => {
  testList.push(doc.data().testkey);
  nameRef.value = testList[0];
});

</script>

テスト的にfirestoreから取得したデータをtemplate内に表示させようとしたが、真っ白になり表示できなかった。
コンソールにエラーは出ておらず、nameRef をconsole.logで確認したところデータ自体の取得はできている。

解決方法

下記のようにonBeforeMount 関数に入れると表示された。

<template>
  <div>{{ nameRef }}</div>
</template>

<script setup lang="ts">
import { defineComponent, ref, onBeforeMount } from "vue";

import { firebaseApp } from "../firebase/config";
import { getFirestore, getDocs, collection } from "firebase/firestore";
import {} from "vue";
const db = getFirestore(firebaseApp);

const nameRef = ref("");

onBeforeMount(async () => {
  const querySnapshot = await getDocs(collection(db, "test"));
  const testList: string[] = [];
  querySnapshot.forEach((doc) => {
    testList.push(doc.data().testkey);
    nameRef.value = testList[0];
  });
});
</script>

-未分類