我正在尝试在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-ifs，v-shows，这里真的很黑暗。
这是我要运行的脚本：https://hpp-service.genome.eu/paymentPage.js
更新 我在prop收到的存款金额中添加了一个观察者，因此我删除了现有脚本并重新运行它以传递新的数据值。
现在，如果我修改存款金额，它就可以使用。 如果我转到付款页面并单击“存款”，则会打开一个空的iframe。
这是我的组件代码：
watchers