将 VueJS 数据变量绑定到 iFrame src答案

【问题标题】：Binding VueJS data variable to iFrame src将 VueJS 数据变量绑定到 iFrame src
【发布时间】：2020-01-29 08:45:18
【问题描述】：

我正在使用 YouTube iFrame 将 YouTube 播放器嵌入到我的 NuxtJS 应用程序中。 videoId 作为属性传递给组件。然后构造URL作为数据属性返回给iFrame的src属性。

YoutubePlayer.vue

props: {
  videoId: {
    type: String,
    required: true
  }
},
data() {
  return {
    videoUrl:
      "https://www.youtube.com/embed/" +
      this.videoId+
      "?autoplay=1&origin=http://example.com"
  };
}

<template>
  <div class="iframeContainer">
    <iframe
      id="ytplayer"
      width="640"
      height="360"
      :src="videoUrl"
    ></iframe>
  </div>
</template>

但这不起作用。我究竟做错了什么？更新：控制台中没有错误，屏幕上没有任何内容。

【问题讨论】：

怎么不工作了？控制台有错误吗？
@YomS。查看我的更新
@yom 我使用相同的语法
请做一个 jsfiddle 并向我们展示这在哪里或如何不适合您。因为我刚刚测试过，对我来说效果很好。 src 上的动态 URL 绑定应该不是问题。

标签： vue.js iframe vuejs2 nuxt.js youtube-iframe-api

【解决方案1】：

你能试试看吗？

props: {
  videoId: {
    type: String,
    required: true
  }
},

data() {
  return {
    videoUrl: '',

  };
},

watch: {
  videoId: function(newVal) { 
     this.videoUrl = "https://www.youtube.com/embed/" +
         newVal +
         "?autoplay=1&origin=http://example.com"
  }
}

【讨论】：