将 IFrame SRC 绑定到 VueJS 数据

【问题标题】：Bind IFrame SRC to VueJS Data将 IFrame SRC 绑定到 VueJS 数据
【发布时间】：2020-01-07 19:18:41
【问题描述】：

我可以将 input 的值更改为 iframe 的 src。 VueJS可以做到这一点吗我在画：

<input id="input"/>
<iframe src="welcome.html"></iframe>

let vm = new Vue ({
  data: {
    src: "welcome.html",
  }, 
});
document.getElementById("input").value = /* src from vm.data? */

【问题讨论】：

你应该使用Vue's ref 来访问元素

标签： javascript html vue.js iframe input

【解决方案1】：

您应该能够执行以下操作：

<input id="input"/>
<iframe :src="iframeSrc"></iframe>

let vm = new Vue ({
  data: {
    iframeSrc: "welcome.html",
  }, 
});

但是你需要绑定 Vue 到一些父元素，比如<div id="app"></div>

new Vue({
    el: "#app",
    ...
}

【讨论】：

感谢帮助

【解决方案2】：

Vue.component('base-iframe', {
  data: function() {
    return {
      url: 'https://example.com'
    }
  },
  template: '<iframe :src="url" />'
})

new Vue({
  el: '#components-demo'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="components-demo">
  <base-iframe />
</div>

【讨论】：

感谢这有帮助，但它对我的尝试不起作用