本文介绍了在模板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中插入脚本标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 18:27
查看更多