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);
}

Answer 2

我知道这有点老了，但是我在MercadoPago上遇到了这个问题，TommyF的回答确实解决了它。但是在我的情况下，需要根据用户的选择动态更新数据交易量。因此，如果有人遇到此问题，我的解决方法是将其放入 updated（）中，设置一个 id 脚本标记并验证 id 是否存在。现有，我按ID和所有 .mercadopago-button 删除。 PS：我是JS和Vue的新手。

let existingScript = document.getElementById('mpScript');
let existingButtons = document.getElementsByClassName('mercadopago-button');
if(existingScript) {
  existingScript.remove();
  while(existingButtons.length > 0) {
    existingButtons[0].parentNode.removeChild(existingButtons[0]);
  }
}

let script = document.createElement('script');
script.setAttribute("src", "https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js");
script.setAttribute("data-transaction-amount", this.total);
script.setAttribute("data-public-key", 'KEY');
script.setAttribute("id", "mpScript");
this.$refs.mpCheckout.appendChild(script);

在模板Vue中插入脚本标签

2 个答案: