在模板Vue中插入脚本标签

Question

我正在创建与支付服务的集成。支付服务为我提供了一个带有脚本标签的表单，我想在我的组件模板中插入带有脚本标签的表单，但是 vue 不允许在模板中插入标签脚本，我该如何插入带有脚本的表单在我的模板组件中标记？

带有结帐服务的表格：

    <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>

预期结果：我的组件：

<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>

Answer 1

您可以使用元素引用和 vanilla JS 将相关标签添加到 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);
}