Я пытаюсь загрузить URL-адрес через всплывающее окно с модальным переходом, но iframe для загрузки URL-адреса не присоединяется к модальному шаблону, даже если тег iframe добавлен в шаблон
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
}
});
Я пробовал все возможное, но iframe по-прежнему не хочет отображаться при открытии модального окна. Пожалуйста, помогите мне