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()