템플릿 Vue 내에 스크립트 태그를 삽입합니다.

템플릿 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>

요소 참조와 바닐라 JS를 사용하여 관련 태그를 돔에 추가할 수 있습니다.

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

조금 오래된 건 알지만 Mercado Pago에서 이 문제를 발견했고 Tommy F의 답변으로 정말 해결되었습니다.단, 사용자의 선택에 따라 데이터 트랜잭션 금액을 동적으로 업데이트해야 했습니다.이 문제에 직면한 사람이 있을 경우 이를 updated()에 삽입하고 ID를 스크립트태그로 설정하여 ID가 존재하는지 확인합니다.기존 id 및 모든 .mercadopago 버튼으로 삭제합니다.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);

언급URL : https://stackoverflow.com/questions/56186715/insert-a-script-tag-inside-template-vue