그래서 내 firebase 저장소에서 일부 pdf에 대한 링크를 검색하려고합니다. 링크를 받으면 특정 목록에 바인딩하고 싶습니다. 문제는 링크를 가져 오기 전에 템플릿이로드되어 목록의 href 속성이 null로 유지된다는 것입니다. 저는 Vuetify도 사용하고 있습니다.
여기 내 템플릿입니다
<template>
<v-layout row wrap v-if="count > 0">
<v-flex v-for="n in count" :key="n">
<v-card:href="link[n-1]" target="_blank">
<v-icon>mdi-file-pdf</v-icon>
<span>Module {{n}}</span>
</v-card>
</v-flex>
</v-layout>
여기 내 대본입니다
<script>
import firebaseApp from "@/firebase/init.js";
var storage = firebaseApp.storage();
var storageRef = storage.ref();
export default {
name: "Dashboard",
data() {
return {
id: this.$route.params.id,
count: null,
link: [],
loading: null
};
},
methods: {
getFile() {
this.link = [];
this.loading = true;
var listRef = storageRef.child(`folder_name${this.id}`);
listRef.listAll().then(res => {
this.count = res.items.length;
for (let i = 1; i <= this.count; i++) {
var starsRef = storageRef.child(`folder_name${this.id}/file_name${i}.pdf`);
starsRef.getDownloadURL().then(url => {
this.link[i - 1] = url;
});
}
this.loading = false;
});
},
updateId() {
this.id = this.$route.params.id;
this.getFile();
}
},
created() {
this.getFile();
},
watch: {
$route: "updateId"
}
};
</script>
링크 배열은 결국 모든 링크를 저장합니다. 그러나 그것은 span 태그에 묶이지 않을 것입니다. vuex를 사용하지 않고 어떻게 이것을 극복합니까? 미리 감사드립니다
이 getDownloadURL()메서드는 비동기식이며 Promise를 반환합니다. 당신은 모든 파일을 병렬로이 방법을 실행하기 원하기 때문에 storageRef.child('folder_name${this.id}')당신이 사용해야 Promise.all()업데이트하기 전에 모든 비동기 작업이 완료되는 것을 기다려야 link배열을.
루프 forEach()대신 다음을 사용 for하면 트릭을 수행해야합니다 (미확인).
listRef.listAll()
.then(res => {
const promises = [];
res.items.forEach(itemRef => { //items is an array of Reference
promises.push(itemRef.getDownloadURL());
});
return Promise.all(promises);
.then(urls => {
this.link = urls;
});
그런 다음 구성 요소에서 다음을 수행합니다.
<v-layout row wrap v-if="count > 0">
<v-flex v-for="(item, index) in link">
<v-card :href="item" target="_blank">
<v-icon>mdi-file-pdf</v-icon>
<span>Module {{index + 1}}</span>
</v-card>
</v-flex>
</v-layout>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다