如何解决vue-pdf无法加载到所有页面“ undefined property”
我正在使用:
- Vue.js,vue-route,Vuetify,Firebase(此处为数据库)和vue-pdf
我正在尝试使用“ vue-pdf” 加载所有pdf页面,但是在尝试阅读pdf时出现此错误。
未捕获的TypeError:无法读取未定义的属性“ novel”
我有一个名为 novel 的对象,该对象最初设置为null。当我从Firebase获取数据时,会将其分配给这个新颖的对象。我按照教程here加载了多个pdf页面。但是,在本教程中,使用的是直接URL,但就我而言,我尝试访问对象内部的特定值,即“ this.novel.nove_url” 。我不确定在这里出了什么问题,下面是我的代码。非常感谢您的帮助。
<template>
<div>
<Navbar />
<v-container fluid>
<h1>{{novel.title}}</h1>
<div class="novel-display container">
<pdf
v-for="i in numPages"
:key="i"
:src="src" //this should display the loaded pdf file
:page="i"
style="display: inline-block; width: 100%"
@num-pages="pageCount = $event"
@page-loaded="currentPage = $event"
></pdf>
</div>
<div class="text-center">
<v-pagination v-model="currentPage" :length="pageCount" :total-visible="7" circle></v-pagination>
</div>
</v-container>
<Footer />
</div>
</template>
<script>
import Navbar from "./Navbar";
import Footer from "./Footer";
import pdf from "vue-pdf";
import db from "../db";
// var loadPDF = pdf.createLoadingTask(
// "https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK"
// );
var loadingTask = pdf.createLoadingTask(this.novel.novel_url); //the file I would like to load
export default {
name: "Read",components: {
Navbar,Footer,pdf,},data() {
return {
novel: null,// data from Firebase is saved here
src: loadingTask,currentPage: 0,pageCount: 0,numPages: undefined,};
},mounted() {
this.src.promise.then((pdf) => {
this.numPages = pdf.numPages;
});
},created() {
let ref = db
.collection("Novels")
.where("novel_slug","==",this.$route.params.novel_slug);
ref.get().then((snapshot) => {
snapshot.forEach((doc) => {
this.novel = doc.data();
this.novel.id = doc.id;
});
});
},};
</script>
解决方法
您不能在this
之外使用export default
(请参阅here)。此外,Firebase数据库的获取是异步的,因此仅在满足novel
返回的诺言(即in the callback functions passed to the then()
method)时填充get()
属性
您可以在loadingTask
的{{1}}钩子中初始化created()
,如下所示(未调试):
get().then()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。