Полоса не определена в Nuxt

Полоса не определена в Nuxt

21.10.2019 01:41:51 Просмотров 50 Источник

Я хочу добавить элементы полосы на мою страницу 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/

У вопроса есть решение - Посмотреть?

Ответы - Полоса не определена в Nuxt / Stripe is not defined in Nuxt

Является ответом!
Aldarund

21.10.2019 02:47:32

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

https://stackoverflow.com/questions/58477901/stripe-is-not-defined-in-nuxt/58478227#comment103295045_58478227
Спасибо человек, я переместил код в смонтированный и все работает. Очень ценю это!
Закрыть X