Javascript vue pdf无法加载到所有页面；“未定义的属性”；_Javascript_Firebase_Vue.js_Google Cloud Firestore_Vuejs2

Javascript vue pdf无法加载到所有页面；“未定义的属性”；

javascript firebase vue.js google-cloud-firestore vuejs2

Javascript vue pdf无法加载到所有页面；“未定义的属性”；,javascript,firebase,vue.js,google-cloud-firestore,vuejs2,Javascript,Firebase,Vue.js,Google Cloud Firestore,Vuejs2,我正在使用： Vue.js、Vue路由、Vuetify、Firebase（此处为数据库）和Vue pdf 我试图使用“vue pdf”加载所有pdf页面，但在尝试读取pdf时出现此错误未捕获的TypeError:无法读取未定义的属性“novel” 我有一个名为novel的对象，它最初设置为null。当我从Firebase获取数据时，它被分配给这个新对象。我按照教程加载了多个pdf页面。然而，在本教程中使用了直接URL，但在我的例子中，我试图访问对象中的一个特定值，即this.novel.n

我正在使用：

Vue.js、Vue路由、Vuetify、Firebase（此处为数据库）和Vue pdf

我试图使用“vue pdf”加载所有pdf页面，但在尝试读取pdf时出现此错误

未捕获的TypeError:无法读取未定义的属性“novel”

我有一个名为novel的对象，它最初设置为null。当我从Firebase获取数据时，它被分配给这个新对象。我按照教程加载了多个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>


{{novel.title}
从“/Navbar”导入导航栏；
从“/Footer”导入页脚；
从“vue pdf”导入pdf；
从“./db”导入数据库；
//var loadPDF=pdf.createLoadingTask(
//   "https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK"
// );
var loadingTask=pdf.createLoadingTask（this.novel.novel\u url）//我要加载的文件
导出默认值{
名称：“读”，
组成部分：{
导航栏，
页脚，
pdf，
},
数据（）{
返回{
novel:null，//来自Firebase的数据保存在这里
src:loadingTask，
当前页面：0，
页面计数：0，
数值：未定义，
};
},
安装的（）{
this.src.promise.then（（pdf）=>{
this.numPages=pdf.numPages；
});
},
创建（）{
设ref=db
.收藏（“小说”）
.where（“novel_slug”，“==”，this.$route.params.novel_slug）；
ref.get（）。然后（（快照）=>{
snapshot.forEach（（doc）=>{
this.novel=doc.data（）；
this.novel.id=doc.id；
});
});
},
};

您不能在

导出默认值

之外使用

此

（请参阅）。此外，Firebase数据库获取是异步的，因此只有当

get（）

返回的承诺得到满足时（即

您可以在

get（）中的created（）
钩子中初始化loadingTask
。然后（）

，如下所示（未测试）：

从“/Footer”导入页脚；
从“vue pdf”导入pdf；
从“./db”导入数据库；
导出默认值{
名称：“读”，
组成部分：{
导航栏，
页脚，
pdf，
},
数据（）{
返回{
novel:null，//来自Firebase的数据保存在这里
src:null，
当前页面：0，
页面计数：0，
数值：未定义，
};
},
安装的（）{
this.src.promise.then（（pdf）=>{
this.numPages=pdf.numPages；
});
},
创建（）{
设ref=db
.收藏（“小说”）
.where（“novel_slug”，“==”，this.$route.params.novel_slug）；
ref.get（）。然后（（快照）=>{
snapshot.forEach（（doc）=>{
this.novel=doc.data（）；
this.novel.id=doc.id；
});
this.src=pdf.createLoadingTask（this.novel.novel\uURL）；
});
},
};