时间戳

首页 > 解决方案 > Vue.js - 无法访问道具对象的属性

vue.js - Vue.js - 无法访问道具对象的属性

问题描述

我正在创建然后使用 pdfjs 将对象传递给子 Vue 组件。当我这样做时，我可以访问对象本身，但我不能访问对象的任何属性。

在所有生命周期钩子中都是这种情况。

<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
  },
}

控制台日志

提前致谢。

标签： vue.js

解决方案

这是因为异步调用尚未完成，因此您只是返回一个空对象，要解决此问题，您需要在then代码部分中设置一个值，并将其绑定到您的道具，因此：

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; 
    })
},

然后，您需要slideDeckItem在父数据属性中声明，并将其绑定到组件的道具：

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

我做了一个 JSFiddle，给你基本的想法，虽然我用超时来模拟异步调用：http: //jsfiddle.net/ga1o4k5c/

你可能还想看看Promises 是如何工作的

推荐阅读