Vue.js - can't access the properties of a prop object

Question

I am creating then passing an object using pdfjs in to a child Vue component. When I do so, I can access the object itself, but I cannot access any properties of the object.

This is the case during all of the lifecycle hooks.

<i-slide-deck-pdf // calling child vue component
    v-if="true"
    :slideDeckItem="fetchPDF('/static/intropdf.pdf')"
    :current-user-progress="currentUserProgress"
    @i-progress="putProgressTracker"
    @i-slide-change="onSlideChange"
/>

...

fetchPDF(url) { // function being used to create the object
  let pdfItem = new Object();
  import(
    'pdfjs-dist/webpack'
  ).
    then(pdfjs => pdfjs.getDocument(url)).
    then(pdf => {
      pdfItem.pdf = pdf;
      pdfItem.pages = range(1, pdf.numPages).map(number => pdf.getPage(number));
      pdfItem.pageCount = pdfItem.pages.length;
    })
  return pdfItem;
},

...

props: { // prop call in child component
  slideDeckItem: {
    type: Object,
    required: true
  },
}

Console log

Thanks in advance.

craig_h · Accepted Answer · 2018-08-09 18:12:25Z

This is because the async call hasn't completed, so you are just returning an empty object, to fix this you want to set a value inside the then portion of your code, and bind this to your prop, so:

fetchPDF(url) { // function being used to create the object
  let pdfItem = new Object();
  import(
    'pdfjs-dist/webpack'
  ).
    then(pdfjs => pdfjs.getDocument(url)).
    then(pdf => {
      pdfItem.pdf = pdf;
      pdfItem.pages = range(1, pdf.numPages).map(number => pdf.getPage(number));
      pdfItem.pageCount = pdfItem.pages.length;

      // This should be inside the "then"
      this.slideDeckItem = pdfItem; 
    })
},

You'll then want to declare slideDeckItem in your parent data property, and bind that to your component's prop:

<i-slide-deck-pdf
    v-if="true"
    :slideDeckItem="slideDeckItem"
    :current-user-progress="currentUserProgress"
    @i-progress="putProgressTracker"
    @i-slide-change="onSlideChange"
/>

I've made a JSFiddle, to give you the basic idea, although I've used a timeout to simulate the async call: http://jsfiddle.net/ga1o4k5c/

You may also want to take a look at how Promises work

Collectives™ on Stack Overflow

Vue.js - can't access the properties of a prop object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related