![Service Service](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了在模板Vue中插入脚本标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在创建与支付服务的集成.支付服务为我提供了一个表单,里面有一个脚本标签,我想在我的组件模板中插入带有脚本标签的表单,但是 vue 不允许在模板中插入标签脚本,如何在模板组件中插入带有脚本标签的表单?
带有付款服务结帐的表单:
<脚本src="https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js"数据公钥=KEY"data-transaction-amount="14.90"></表单>
预期结果:我的组件:
<div id="仪表板"><form action="http://localhost:8081/api/v1/payment/" method="POST"><脚本src="https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js"数据公钥=KEY"data-transaction-amount="14.90"></表单>
</模板><脚本>从vuex"导入 { mapState };导出默认{数据() {返回 {}},}
解决方案
您可以使用元素引用和 vanilla JS 将相关标签添加到 dom.
...</表单>安装(){让 foo = document.createElement('script');foo.setAttribute("src","https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js");foo.setAttribute("数据交易量", "14.90")this.$refs.myform.appendChild(foo);}
I'm creating a integration with a payment service.The payment service provides me a form with a script tag inside, I want to insert that form with script tag inside my component template,but vue doesn't allow the insertion of tag script within a template, how can I insert that form with script tag inside my template component?
the form with checkout of payment service:
<form action="http://localhost:8081/api/v1/payment/" method="POST">
<script
src="https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js"
data-public-key="KEY"
data-transaction-amount="14.90">
</script>
</form>
The expected result:My component:
<template>
<div id="dashboard">
<form action="http://localhost:8081/api/v1/payment/" method="POST">
<script
src="https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js"
data-public-key="KEY"
data-transaction-amount="14.90">
</script>
</form>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {}
},
}
</script>
解决方案
You can use an element reference and vanilla JS to add the relevant tag to the dom.
<form ref="myform">
...
</form>
mounted() {
let foo = document.createElement('script');
foo.setAttribute("src","https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js");
foo.setAttribute("data-transaction-amount", "14.90")
this.$refs.myform.appendChild(foo);
}
这篇关于在模板Vue中插入脚本标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!