iframe не отображается во всплывающем окне модального перехода vuejs - PullRequest
0 голосов
/ 11 июля 2020

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

...