this.currentBook

Question

老师，按您说的，再EbookReader可以正常获取this.currentBook
麻烦老师帮我看下代码可以吗，感激。在EbookSlideContents无法获取。
https://gitee.com/kaiwenxiao/vue-ebook

Answer 1

Sam 2019-04-16 23:28:07

你目前的源码：

mounted() {
  console.log(this.currentBook) // null
  console.log('asd') // asd
},

这样打印是获取不到currentBook的，因为下载电子书后才会设置currentBook，这个过程在Vue渲染DOM之后，所以在mounted的时候currentBook并没有被赋值，因而打印结果为null，要监听currentBook的状态可以使用watch进行监听，代码如下：

watch: {
  currentBook(book) {
    console.log('new currentBook', book);
  }
}

这样就可以监听currentBook的变化了：）

• 提问者 肖慕粉 #1

  老师，按您的方法成功获取到currentBook了，不过不是很明白在此处需要watch currentBook待加载完毕才能调用它的方法，而在其它组件却不需要watch就可以调用，谢谢老师

• Sam 回复 提问者 肖慕粉 #2

  其他组件是在currentBook获取后才进行渲染的，所以其他组件中可以直接获取到currentBook，如果还有不理解的，你可以具体举个例子看下

• qq_慕雪1029227 #3

  那这里做doSearch需要用到currentBook.ready怎么办？currentBook是null啊，视频里这样写为什么没出错呢，我这里就一直报错

Answer 2

Sam 2019-04-16 22:23:43

好的，代码调试过了，没什么大问题，把EbookSlideContents.vue源码中27-30行做一下调整就行了，代码如下：

<div class="slide-contents-book-info-wrapper">
  <div class="slide-contents-book-title">{{metadata && metadata.title}}</div>
  <div class="slide-contents-book-author">{{metadata && metadata.creator}}</div>
</div>

增加metadata的判断即可消除报错，出错原因是metadata是异步写入的，下载电子书解析后才会获得metadata，所以这个过程在Vue渲染DOM之后，如果不加metadata的判断会导致浏览器抛出异常

• 提问者 肖慕粉 #1

  谢谢老师，不过我在这里问题主要是this.current Book打印是null，很奇怪，想请教老师

• 提问者 肖慕粉 #2

  EbookReader组件可以正常访问currentBook，很奇怪，拜托老师了！

• Sam 回复 提问者 肖慕粉 #3

  见上面的回复?