Muatkan data Firestore dalam komponen sebelum membuat dengan Vuefire
<p>Saya cuba mengisi jadual orang dengan nama dan gambar profil. Nama itu diperoleh daripada pangkalan data Firestore dan digunakan oleh imej untuk mencari imej yang berkaitan dalam baldi Firebase. </p>
<p>Saya telah menonton video berjam-jam dan telah meneliti hampir seratus artikel jadi kod contoh saya mengandungi coretan setiap kod kerana saya telah mencuba setiap gabungan dan mendapat gabungan tetapi bukan keputusan yang Berjaya. </p>
<p>Dalam keadaan semasa yang mengembalikan ralat minimum, saya berjaya mengisi jadual dengan nama, namun dalam komponen yang sama ia gagal mengeluarkan gambar profil. Nilai yang digunakan untuk gambar profil telah dikemas kini, tetapi ia telah dikemas kini daripada nilai pemegang tempat kepada <code>undefined</code>. </p>
<p><strong>GamePlanner.vue</strong></p>
<pre class="brush:vue;toolbar:false;"><template>
<div>
<Medan />
<Bangku />
<!-- <Suspen>
<template #default>
<Ringkasan Rancangan />
<!-- </template>
<template #fallback>
<div class="memuatkan">Memuatkan...</div>
</template>
</Suspens>
</div>
</template>
</pra>
<p><strong>PlanSummary.vue</strong></p>
<pre class="brush:vue;toolbar:false;"><template>
<div class="summaryContainer">
<div class="inningTableContainer">
<table class="inningTable">
<tbody>
<!-- <Suspen> -->
<!-- <template #default> -->
<PlayerRow v-for="player in players.value" :key="player.id" :player="(pemain sebagai Pemain)" />
<!-- </template> -->
<!-- <template #fallback>
<tr data-playerid="0">
<img class="imej pemain" src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />
Memuatkan pemain...
<span class="playerNumber">00</span>
</tr>
</template> -->
<!-- </Suspense> -->
</tbody>
</table>
</div>
</div>
</template>
<penyiapan skrip lang="ts">
import { computed, onErrorCaptured, ref } daripada "vue";
import { useFirestore, useCollection } daripada "vuefire";
import { koleksi } daripada "firebase/firestore";
import { Player, Inning } daripada "@/definitions/GamePlanner";
import PlayerRow daripada "./PlayerRow.vue";
const db = useFirestore();
const gamePlanID = "O278vlB9Xx39vkZvIsdP";
// const players = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`));
// const players = ref(useCollection(collection(db, `/gameplans/${gamePlanID}/participants`)));
// Ralat tidak dikendalikan semasa melaksanakan flush penjadual
// Tidak ditangkap (dalam janji) DOMException: Gagal melaksanakan 'insertBefore' pada 'Nod': Nod sebelum nod baharu hendak dimasukkan bukanlah anak nod ini.
pemain const = ref();
players.value = useCollection(collection(db, `/gameplans/${gamePlanID}/participants`));
// Gelung yang kelihatan tidak terhingga dengan "onServerPrefetch dipanggil apabila tiada contoh komponen aktif untuk dikaitkan."
// Memberikan 5 (??) pemain yang tidak ditentukan
// Satu ralat ditunjukkan: Uncaught (dalam janji) TypeError: Tidak dapat membaca sifat undefined (membaca 'substring')
// const players = computed(() => useCollection(collection(db, `/gameplans/${gamePlanID}/participants`)));
// onErrorCaptured((ralat, vm, maklumat) => {
// console.log("Ralat memuatkan komponen Ringkasan: ", ralat, "vm: ", vm, "maklumat: ", info);
// ralat lontaran;
// });
</skrip>
</pra>
<p><strong>PlayerRow.vue</strong></p>
<pre class="brush:vue;toolbar:false;"><template>
<tr :key="player2.id" :data-playerid="player2.id">
<td>
<img class="imej pemain" :src="playerPictureURL" />
{{ pemain2.nama panggilan || pemain2.nama pertama + " " + player2.lastName }}
<span class="playerNumber">{{ player2.playerNumber }}</span>
</td>
</tr>
</template>
<skrip lang="ts" persediaan>
import { ref, PropType, computed, onMounted, watch } daripada "vue";
import { useFirebaseStorage, useStorageFileUrl } daripada "vuefire";
import { ref sebagai storageRef } daripada 'firebase/storage';
import { Player, Inning } daripada "@/definitions/GamePlanner";
const fs = useFirebaseStorage();
const props = defineProps({
'player': { type: Object as PropType<Player>, required: true },
// 'inning': Array<Inning>
});
const player2 = ref(props.player);
// const innings = dikira(() => props.innings);
// const playerPictureURL = dikira(() => {
// const playerPictureFilename = `${player2.value.firstName.substring(0,1)}${player2.value.lastName}.png`.toLowerCase();
// const playerPictureResource = storageRef(fs, `playerPictures/${playerPictureFilename}`);
// return useStorageFileUrl(playerPictureResource).url.value sebagai rentetan;
// });
// const playerPictureURL = ref(() => {
// const playerPictureFilename = `${player2.value.firstName.substring(0,1)}${player2.value.lastName}.png`.toLowerCase();
// const playerPictureResource = storageRef(fs, `playerPictures/${playerPictureFilename}`);
// return useStorageFileUrl(playerPictureResource).url.value sebagai rentetan;
// });
const playerPictureURL = ref("https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50");
fungsi async getPlayerPictureURL() {
console.log("PlayerRow.ts getPlayerPictureURL");
const playerPictureFilename = `${player2.value.firstName.substring(0,1)}${player2.value.lastName}.png`.toLowerCase();
const playerPictureResource = menunggu storageRef(fs, `playerPictures/${playerPictureFilename}`);
playerPictureURL.value = menunggu useStorageFileUrl(playerPictureResource).url.value sebagai rentetan;
}
onMounted(() => {
console.log("PlayerRow.ts onMounted");
getPlayerPictureURL();
});
tonton(playerPictureURL, (newVal, oldVal) => {
console.log("PlayerRow.ts tonton playerPictureURL");
console.log("newVal: " + newVal);
console.log("oldVal: " + oldVal);
});
</skrip>
</pra>
<p>我的印象是 <kod><Suspens></code> 需要包装 <kod><PlayerRow></code> 组件，因为我正在使用 <kod>storageRef</code> 和 < kod>useStorageUrl</code> 方法，但它似乎引入了更多问题。根据 vuefire 文档并检查代码本身的定义，它们乼的它们乼的它们乼的它们伯试立即调用它们不会产生立即/实际结果。</p>
<p><strong>相关软件包版本</strong></p>
<pre class="brush:json;toolbar:false;">{
"vue": "^3.2.45"
"firebase": "^9.15.0",
"skrip taip": "^4.9.3",
"undangan": "^4.0.0",
"vue-router": "^4.1.6",
"vue-tsc": "^1.0.11",
"vuefire": "3.0.0-beta.6"
}
</pra></p>
