Полоса не определена в Nuxt
Я хочу добавить элементы полосы на мою страницу nuxt js, однако, я получил ошибку
Полоса не определена
Я вставил <script src="https://js.stripe.com/v3/"></script>
на мой nuxt.config.js
Вот этот код
head: {
title: process.env.npm_package_name || "",
script: [{ src: "https://js.stripe.com/v3/" }],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
]
},
Моя страница оплаты
<template>
<div>
<div ref="card"></div>
<button v-on:click="purchase">Purchase</button>
</div>
</template>
<script>
let stripe = Stripe("Key"),
elements = stripe.elements(),
card = undefined;
export default {
mounted: function() {
card = elements.create("card");
card.mount(this.$refs.card);
},
methods: {
async purchase() {
let result = await stripe.createToken(card);
}
}
};
</script>
Я следовал этому учебнику и до сих пор не могу это исправить
https://alligator.io/vuejs/stripe-elements-vue-integration/
У вопроса есть решение - Посмотреть?

Источник

Возможный дубликат правила ESLint "no-undef" вызывает мое использование подчеркивания неопределенной переменной
Источник
Ответы - Полоса не определена в Nuxt / Stripe is not defined in Nuxt
Является ответом!

21.10.2019 02:47:32
Вы включаете stripe for В скрипты, поэтому он будет загружен в браузере. Но nuxt-это ССР. И код в вашем разделе скрипта также будет выполняться на сервере. И на сервере нет полосы, так что он не будет работать. Вам нужно выполнить весь ваш код, который создает полосу в смонтированном крючке, который выполняется только на клиенте

Спасибо человек, я переместил код в смонтированный и все работает. Очень ценю это!
Помочь в развитии проекта: