在nuxt js中动态更改视频标签的src

Question

我正在使用nuxt.js。我有一个标签，我想动态更改src，但是我无法调用load（）方法刷新视频并开始播放。

标签：

<video ref="videoPlayer">

nuxt方法中的“更改视频”功能：

 this.videoUrl = "new url";
 let videoPlayer = this.$refs['videoPlayer'];
 videoPlayer.load();

load（）不起作用！它有错误。我无法访问load（）方法！为什么呢？我该怎么办？

错误：

cannot read property 'load' of undefined

Answer 1

在数据中定义videoUrl：

data() {
 return {
  videoUrl: 'path/to/old/video'
 }
}

html中的模板：

 <video
  ref="videoPlayer"
  muted
  controls
 >
  <source :src="videoUrl" type="video/mp4" />
 </video>

在方法或Nuxt挂钩中：

changeVideoUrl() {
 this.videoUrl = '/videos/home/intro-desktop.mp4'
 const videoPlayer = this.$refs.videoPlayer
 videoPlayer.load()
 videoPlayer.play()
},

在数据中定义videoUrl以正确激活Vue反应系统很重要。