The vue-pdf is having trouble loading all pages due to an "undefined property" issue

Question

The vue-pdf is having trouble loading all pages due to an "undefined property" issue

I am currently utilizing the following technologies:

Vue.js, vue-route, Vuetify, Firebase (with a database) and vue-pdf

The issue I am facing involves attempting to load all pdf pages using "vue-pdf" plugin. However, when trying to read the pdf, I encounter the following error:

Uncaught TypeError: Cannot read property 'novel' of undefined

In my code, I have an object called novel, which is initially set to null. After fetching data from Firebase, this novel object gets populated. I referred to a tutorial here for loading multiple pdf pages, but while the tutorial uses a direct URL, I need to access a specific value in my object - "this.novel.nove_url". I'm uncertain about what mistake I might have made in implementing this. Below is the relevant portion of my code. Any assistance would be greatly appreciated.

<!-- Code goes here -->

javascript firebase vue.js google-cloud-firestore vuejs2

Answer 1

Answer №1

When working with Vue.js, it's important to note that you cannot utilize this outside of the export default block. Additionally, keep in mind that Firebase database fetch operations are asynchronous, meaning the novel property will only be populated once the promise returned by get() is fulfilled (typically within the callback functions passed to the then() method).

To properly initialize the loadingTask variable, you can do so within the created() hook or inside get().then(). Here is a possible implementation (although untested):

import Footer from "./Footer";
import pdf from "vue-pdf";
import db from "../db";

export default {
  name: "Read",
  components: {
    Navbar,
    Footer,
    pdf,
  },
  data() {
    return {
      novel: null, // data from Firebase saved here
      src: null ,
      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;
      });
      this.src = pdf.createLoadingTask(this.novel.novel_url); 
    });
  },
};
</script>

Answer 2

When working with Vue.js, it's important to note that you cannot utilize this outside of the export default block. Additionally, keep in mind that Firebase database fetch operations are asynchronous, meaning the novel property will only be populated once the promise returned by get() is fulfilled (typically within the callback functions passed to the then() method).

To properly initialize the loadingTask variable, you can do so within the created() hook or inside get().then(). Here is a possible implementation (although untested):

import Footer from "./Footer";
import pdf from "vue-pdf";
import db from "../db";

export default {
  name: "Read",
  components: {
    Navbar,
    Footer,
    pdf,
  },
  data() {
    return {
      novel: null, // data from Firebase saved here
      src: null ,
      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;
      });
      this.src = pdf.createLoadingTask(this.novel.novel_url); 
    });
  },
};
</script>

The vue-pdf is having trouble loading all pages due to an "undefined property" issue

Answer №1

Similar questions

Tips for concealing overlay when the cursor hovers

Issue encountered when attempting to utilize multiple datasets with Twitter Typeahead/Bloodhound

Using a navigation bar as a structural component in React

Can I use Javascript to access a span element by its class name?

issue with Firebase notifications not triggering in service worker for events (notification close and notification click)

Having trouble with AngularJs and moment.js integration?

Typescript Angular2 filtering tutorial

"Learn the art of refreshing data in AngularJS following the use of $emit event handling

Using Ajax to insert data into WordPress

Unable to employ the inequality operator while querying a collection in AngularFire

Locate each document in MongoDB that pertains to a time period of

What is the process for adjusting the expiration time of a GitLab accessToken?

simulating interaction with databases within API routes

Discovering the Active Modal Form in BootStrap: Uncovering the Open Modal Form using JavaScript/jQuery

When the click event is triggered, the second function guess() does not execute

the dropdown menu toggle is not working as expected

What is the best way to save the toggleClass value of various selectors along with their corresponding classes in localStorage?

Need some assistance with Javascript Ajax? Specifically, dealing with multiple values?

Difficulties accessing MongoDb database using Node.js

A guide on extracting data from various HTML elements effectively with JavaScript