Vue.js 메서드에서 외부 JavaScript 개체를 사용하는 방법
Vue.js 2 어플리케이션으로 스트라이프를 조작하려고 합니다.PCI-DSS의 이유로 Stripe에서는 Javascript를 항상 로딩해야 합니다.의 지시에 따라 다음 절차를 따릅니다.
하지만 난...'Stripe' is not defined라이브러리를 사용하려고 하면 오류가 발생합니다.이 해결책들은 단지 이 문제를 해결하기 위해<script>출력 HTML(분석용 등)에 태그를 붙입니다.이 스크립트의 함수나 오브젝트를 실제로 소비하지 않습니다.
내 컴포넌트 Javascript는 다음과 같습니다.
<script>
export default {
name: "PaymentPage",
mounted() {
let stripeScript = document.createElement('script');
stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
document.head.appendChild(stripeScript);
let s = Stripe('pk_test_Fooo');
console.log(s);
}
}
</script>
스크립트 태그도 추가해보고public/index.html하지만 같은 결과가 나옵니다.Stripe는 개발자에게 사이트의 모든 페이지에 스크립트를 Import하도록 권장하기 때문에 이 방법을 선호합니다.
<!DOCTYPE html>
<html lang="en">
<head>
// ...
<script src="https://js.stripe.com/v3/"></script>
</head>
외부 CDN에서 스크립트를 가져와 컴포넌트의 Javascript 내에서 사용하려면 어떻게 해야 합니까?
Vue.js와 Stripe를 통합하는 라이브러리(matfish2/vue-stripe 및 jofftiquez/vue-stripe-checkout 등)는 알고 있습니다만, Stripe의 전자가 올바르게 Import 되지 않습니다(문제 #24). 후자는 오래된 Stripe API를 기반으로 구축되어 있으며, 새로운 버전은 아직 베타판입니다.
스크립트가 로드될 때까지의 시간을 주지 않고 있습니다.Stripe거기에 있습니까.필요한 것은 다음과 같습니다.
<script>
export default {
name: "PaymentPage",
mounted() {
let stripeScript = document.createElement('script');
stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
stripeScript.onload = () => {
let s = Stripe('pk_test_Fooo');
console.log(s);
};
document.head.appendChild(stripeScript);
}
}
</script>
yuriy636의 코멘트 덕분에 에러는 linter에서만 발생한다는 것을 알 수 있었고, 아마 제가 무엇을 하고 있는지 정적으로 알 수 없을 것입니다.
저는 대본을 넣기로 했습니다.index.html그 후 다음과 같은 방법으로 린터 오류를 없앴습니다.
// eslint-disable-next-line no-undef
let s = Stripe('pk_test_Fooo');
제 경우 특정 스크립트의 함수를 호출할 때 오류가 발생했습니다.따라서 "window" 범위를 지정해야 했습니다.또, 「onload」기능내의 Vue 요소에 액세스 할 필요가 있는 경우는, 「this」인스턴스의 새로운 변수가 필요합니다.
<script>
export default {
name: "PaymentPage",
mounted() {
let stripeScript = document.createElement('script');
// new variable for Vue elements.
let self = this;
stripeScript.onload = () => {
// call a script function using 'window' scope.
window.Stripe('pk_test_Fooo');
// call other Vue elements
self.otherVueMethod();
};
stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
document.head.appendChild(stripeScript);
}
}
Vue 2.6에서 작업했습니다.
npm 패키지를 설치하기만 하면 됩니다.npm install @stripe/stripe-js일반 수입품처럼 사용할 수 있습니다.
import { loadStripe } from "@stripe/stripe-js";
export default {
async mounted() {
// init stripe
const stripe = await loadStripe('your_stripe_key_here');
this.stripe = stripe; // store the stripe instance
// access the stripe instance in your methods or where you want to use them
},
}
2022년 1월 6일부로 작동합니다.
언급URL : https://stackoverflow.com/questions/57840349/how-to-use-external-javascript-objects-in-vue-js-methods
'programing' 카테고리의 다른 글
| Java 8 lamdas, Function.identity() 또는 t->t (0) | 2022.08.09 |
|---|---|
| GCC/G++ 컴파일러에서 pedantic을 사용하는 목적은 무엇입니까? (0) | 2022.08.09 |
| Vue 데이터 바인딩을 사용하여 switch 문을 올바르게 표현하는 방법 (0) | 2022.08.09 |
| Vue.js에서 여러 라우터 뷰를 사용하는 방법 중 하나가 다른 컴포넌트 안에 있습니까? (0) | 2022.08.09 |
| (어떤 포인터의) 크기는 항상 4입니까? (0) | 2022.08.09 |