2017-08-04 54 views
2

我正在使用vue-youtube-embed庫在Vue.js組件內部顯示Youtube播放器。vue-youtube-embed無法讀取屬性'src'null

播放器在我第一次加載組件時效果很好,但以後無法播放視頻。我認爲這是組件後來被銷燬並重新安裝的時候。

在我的網站我用一個router-view。當瀏覽到播放器組件在第一時間它的偉大工程,但如果我回到主頁,然後向前再次播放器組件,我得到這個錯誤:

Cannot read property 'src' of null 

完整的堆棧跟蹤:

www-widgetapi.js:121 Uncaught TypeError: Cannot read property 'src' of 
null at W.g.C 
(https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQKB5wA/www-widgetapi.js:121:84) 
at V 
(https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQKB5wA/www-widgetapi.js:113:99) 
at W.(anonymous function).getCurrentTime.Mb.(anonymous function) [as 
loadVideoById] 
(https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQKB5wA/www-widgetapi.js:130:11) 
at VueComponent.play (eval at (http://localhost:8080/app.js:1037:1), 
:136:31) at VueComponent.boundFn [as play] (eval at 
(http://localhost:8080/app.js:729:1), :165:14) at Vue$3.eval (eval at 
(http://localhost:8080/app.js:1037:1), :73:18) at Vue$3.Vue.$emit 
(eval at (http://localhost:8080/app.js:729:1), :2207:16) at 
VueComponent.playSong (eval at (http://localhost:8080/app.js:1058:1), 
:123:73) at boundFn (eval at (http://localhost:8080/app.js:729:1), 
:165:14) at Proxy.invoker (eval at 
(http://localhost:8080/app.js:729:1), :1738:18) 

玩家似乎很好,我只在使用loadVideoById方法嘗試播放視頻時出現此錯誤。

您可以在my site上自己查看錯誤。 (WIP)

重現該錯誤:

  1. 創建一個新的站
  2. 在您可以搜索YouTube視頻播放器下方的文本輸入,搜索視頻和搜索一下就可以了結果在播放列表中
  3. 點擊它,發揮它
  4. 單擊後退按鈕返回到主界面
  5. 現在再往前走,返回到您創建
  6. 嘗試播放視頻再次

我沒有張貼任何代碼,因爲它調用loadVideoById時只是,當我調試似乎播放器已加載並可以(不null)。

回答

2

看來問題是將Youtube播放器從DOM中分離出來,一旦你將它從播放器對象中移除,你就會發現這個錯誤,我找不到解決方案,所以我只是一直保留它的組件使用

v-show

,而不是

v-if