我如何在 Nuxtjs 和 Vuejs 中更新 <source src="data" >

【问题标题】：How can i update <source src="data" > in Nuxtjs and Vuejs我如何在 Nuxtjs 和 Vuejs 中更新 <source src="data" >
【发布时间】：2021-01-29 04:24:39
【问题描述】：

如何用视频文件更新“src”的值？

在movie.vue中

<div class="row">
      <video width="640" controls autoplay>
        <source
          id="youtube"
          ref="youtube"
          src="https://static.videezy.com/system/resources/previews/000/019/697/original/pointing-grey.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>
      <button class="btn btn-primary" @click="Change">
        Skip Ads
      </button>
    </div>
  </div>

在我的脚本中

 methods: {
    Change() {
      console.log("Skip Ads");
      this.$refs.youtube.src =
        "https://static.videezy.com/system/resources/previews/000/019/697/original/pointing-grey.mp4";
      console.log(this.$refs.youtube.src);
    }
  },

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

使用v-bind，将<source> 的src 属性绑定到可以由Change() 更新的data property。当 URL 发生变化时，还将 key 应用于 <video> 元素以创建新元素：

<template>
  <video width="640" :key="url" controls autoplay>
    <source :src="url" />
  </video>
</template>

<script>
export default {
  data() {
    return {
      url: ''
    }
  },
  methods: {
    Change() {
      this.url = 'https://static.videezy.com/system/resources/previews/000/019/697/original/pointing-grey.mp4'
    }
  }
}
</script>

demo

【讨论】：

但是当我点击时这个网址仍然没有更新显示
@ZHARP 使用<video :key="url">。请参阅答案中的演示链接。