Vue.js中如何将URL传入iFrame？零基础用户实现YouTube链接绑定需求问询

你现在的代码方向是对的，只是在<iframe>的src属性绑定上犯了Vue新手常见的小错误——Vue中要绑定data里的变量到DOM属性上，必须用v-bind指令（或者简写:），直接写src=this.link是原生JS的写法，在Vue模板里不生效。

咱们一步步修正并验证功能：

步骤1：修正iframe的src绑定语法 #

把模板里的src=this.link改成:src="link"，这样Vue才会把data里的link值正确渲染到iframe的src属性上：

<iframe width="800" height="230" :src="link"></iframe>

步骤2：验证切换链接的功能（可选） #

如果你的OnSelectCam方法是用来切换视频的，可以加个测试按钮来触发它，确保能正常更新链接：

<button @click="OnSelectCam('https://www.youtube.com/embed/dQw4w9WgXcQ')">切换到测试视频</button>

步骤3：确认YouTube链接格式 #

要注意必须使用YouTube的嵌入格式链接（https://www.youtube.com/embed/视频ID），不能用普通的观看链接（比如https://www.youtube.com/watch?v=xxx），否则iframe会加载失败。

修正后的完整代码 #

<template>
  <div>
    <iframe width="800" height="230" :src="link"></iframe>
    <!-- 测试用的切换按钮 -->
    <button @click="OnSelectCam('https://www.youtube.com/embed/dQw4w9WgXcQ')">切换视频</button>
  </div>
</template>

<script>
import axios from "axios";
export default{
  name:"Camera",
  data(){
    return{
      link:"https://www.youtube.com/embed/08Xmfi1QIxc",
    };
  },
  methods:{
    OnSelectCam(link){
      this.link = link;
    },
  },
  // 如果之后需要用axios远程获取链接，可以加在这里
  // mounted() {
  //   axios.get('/your-api-url')
  //     .then(res => {
  //       this.link = res.data.videoLink;
  //     })
  //     .catch(err => console.log(err));
  // }
}
</script>

<style scoped>
</style>

现在运行代码，你应该能看到初始的YouTube视频正常加载，点击按钮也能切换到新的视频啦。如果之后需要通过axios获取远程链接，直接在mounted钩子（或者其他合适的生命周期）里发起请求，把返回的链接赋值给this.link就可以了。

内容的提问来源于stack exchange，提问作者Jim Gallagher