iframe not showing in vuejs modal transition pop up
Am trying to load a url via a pop up with modal transition, but the iframe to load the url is not attaching into the modal template even as the iframe tage is added in the template
const Modal = { props: { url: { type: String, default: "" }, reference: { type: String, default: "" } }, template: ` <transition name="modal"> <div class="modal-mask fixed-position height-100-percent width-100-percent" style="z-index:150;" > <div class="modal-wrapper text-center"> <div class="modal-container inline-block width-100-percent height-100-percent"> <iframe :src="url" width="100%" height="100%" /> </div> </div> </div> </transition> `, mounted: function() { //or to load the url in the iframe this way //window.frames['iframe'].location = this.url; } }; const Staker = { data: function() { return { url: "", reference: "", show: false }; }, components: { modal: Modal }, methods: { makePayment() { setTimeout(()=>{ this.url = "http://arsenal.com"; this.reference = "E8949K8"; this.show = true; }, 6000); }, close() { this.show = false; } }, template: ` <div> <modal v-if="show" @close="close()" :url="url" :reference="reference"></modal> <a @click="makePayment()">Make Payment</a> </div> ` }; new Vue({ el: "#staker", components:{ 'staker': Staker } }); I have tried everything possible but the iframe still don’t want to show up when the modal opens. Please can someone help me
