Can I change the value of an input to the src of an iframe. Is this possible with VueJS I am picturing:

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

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

Can I change the value of an input to the src of an iframe. Is this possible with VueJS I am picturing:

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

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

• javascript
• html
• vue.js
• iframe
• input

• You should probably use Vue's ref to access the element – user9161752 Commented Jan 7, 2020 at 20:20

2 Answers 2

You should be able to do something like:

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

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

But you need to bind Vue to some parent element, like <div id="app"></div>

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

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

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

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