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

Utilizing Additional Parameters in Vuetify Rule Declarations

I've encountered some issues with importing pagination from modules after installing SwiperJs

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

The issue of actions failing to flow from sagas to reducers in React.js

Node.js equivalent of Java's byteArray

unable to connect a value with the radio button

Newbie in PHP: Techniques for transferring PHP variables between different sections of PHP code

Create the key's value in a dynamic manner within localforage

Retrieving information from a dynamically generated HTML table using PHP

Show specific content based on which button is selected in HTML

Caution: Attempting to access a non-existent 'sequelize' property within a circular dependency in the module exports

Personalized text field in date selector using Material UI

Updating a webpage using Ajax in Django

Both IE and Firefox exhibit erratic behavior when updating the location.hash during the scroll event

Trouble fetching asynchronous data in Next.js Higher Order Component

Utilizing TypeScript to Populate an observableArray in KnockoutJS

Tips for testing nested HTTP calls in unit tests

Making an Ajax call using slash-separated parameters

creating reactive images with Vue

Creating beautiful prints with images