vue-youtube-embed 无法读取 null 的属性“src”

Question

我正在使用vue-youtube-embed 库在Vue.js 组件内显示一个Youtube 播放器。

当我第一次加载组件时播放器运行良好，但后来无法播放视频。我认为这是该组件稍后被销毁并再次安装的时候。

在我的网站中，我使用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 上自己查看错误。 （在制品）

重现错误：

1. 创建一个新站
2. 在播放器下方的文本输入中，您可以搜索 youtube 视频，搜索视频并在搜索结果中点击它
3. 在播放列表中点击播放
4. 点击返回按钮返回主页面
5. 现在再次前进，返回您创建的站点
6. 再次尝试播放视频

我没有发布任何代码，因为它只是在调用loadVideoById 时，当我调试时似乎播放器已加载并准备好（不是null）。

Answer 1

似乎问题在于将 Youtube 播放器与 DOM 分离，一旦您将其移除，您就会开始从 Player 对象中收到此错误，我找不到解决方案，所以我只是一直使用它的组件保持打开状态

v-显示

而不是

如果

Answer 2

如果它看起来像这样......

html

<youtube @ready="ready" ....>

js

ready(event) {
  this.player = event.target;
  ....
}

这对我有用...

created 或更改时videoId

this.player = null;