在Vue组件中加载外部脚本

时间:2020-06-25 10:58:32

标签: javascript vue.js vuejs2 vue-component dom-events

我正在尝试在Vue组件中加载外部脚本。

它包含一个脚本,该脚本使用数据值和其他属性来创建要插入 iframe src 中的URL,以便它安装以数据值作为价格的付款表单。

问题是我无法控制脚本的运行。

仅在刷新页面后运行,并且显然以数据的初始值运行。 每次打开对话框时,我都需要运行脚本,并且组件内部会传递更新的数据值。

我尝试过<template> <div class="container"> <button @click="click">Open Modal</button> <transition name="fade"> <div v-if="open" class="modal"> <div class="backdrop"/> <button @click="close">Close</button> </div> </transition> </div> </template> <script> export default { data() { return { open: false }; }, methods: { click() { this.open = true; }, close() { this.open = false; } } }; </script> <style lang="scss"> body { margin: 0; } .container { width: 100vw; height: 100vh; background-image: url(https://source.unsplash.com/1600x900/?coffee); background-size: cover; display: flex; justify-content: center; align-items: center; > button { font-size: 20px; } } .modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; > .backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(4px); background-color: rgba(0, 0, 0, 0.6); z-index: -1; } } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> v-ifsv-shows,这里真的很黑暗。

这是我要运行的脚本:https://hpp-service.genome.eu/paymentPage.js


更新 我在prop收到的存款金额中添加了一个观察者,因此我删除了现有脚本并重新运行它以传递新的数据值。

现在,如果我修改存款金额,它就可以使用。 如果我转到付款页面并单击“存款”,则会打开一个空的iframe。

这是我的组件代码:

watchers

0 个答案:

没有答案