未知的自定義元素：<vue-stripe-checkout> - 您是否正確注冊了組件？</vue-stripe-checkout>

Question

使用 vue-stripe-checkout 組件使用會話時出現以下錯誤：

[Vue 警告]：未知的自定義元素：- 您是否正確注冊了組件？ 對於遞歸組件，請確保提供“名稱”選項。

我已經嘗試了所有方法，將其全局安裝並單獨安裝在組件本身中：

    <div>
<template>
<vue-stripe-checkout
  ref="sessionRef"
  :pk="publishableKey"
  :session-id="sesion"
>
  <template slot="checkout-button">
 <button @click="$refs.sessionRef.redirectToCheckout()" class="btn-yellow wow fadeInUp btn" style="visibility: visible; animation-name: fadeInUp;">Pagar</button>
  </template>
</vue-stripe-checkout>
   
</div>
</template>

<script>
//import { StripeCheckout } from 'vue-stripe-checkout';
import VueStripeCheckout from "vue-stripe-checkout";

export default {
   components: {
    VueStripeCheckout,
   // 'vue-stripe-checkout': VueStripeCheckout,
  },
    data() {
    return {
    loading: false,
    sesion: '',
    lineitems: [],
    publishableKey:"pk_live_51H2ldaC2yedQUHHsgvBRSRUteFyYcwW8HHylF2MA7qbDfIT9NUNk3wTpJWu2z7C0eNVdkj5EJA9MSJvx8yR3Biif00RwexkPNq",
    items: [],
    billingAddressCollection: 'required',
    successUrl: 'https://tarfut.es',
    cancelUrl: 'https://tarfut.es',
  }
  },
  created() {
    for (var prop in this.$store.state.cart) {
      //console.log(this.$store.state.cart[prop])
      var x = Object.assign({}, this.$store.state.cart[prop])
      this.items.push({quantity: this.$store.state.cart[prop].quantity, sku: this.$store.state.cart[prop].sku})
      this.lineitems.push({quantity: this.$store.state.cart[prop].quantity, price: this.$store.state.cart[prop].price})
    }
    let formdata = new FormData();
        formdata.append('data',JSON.stringify(this.lineitems));
         this.$http.post(`/crearsesion`, formdata)
                    .then(response => {
                        if (response.data.success) {
                            this.sesion = response.data.id
                            console.log(this.sesion)
                            console.log(response.data.id)
                        } 
                    }).then(() => {
                        
                    })

  },
    
    methods: {
      checkout () {
        
      this.$refs.checkoutRef.redirectToCheckout();
    },
         removeFromCart(item) {
        this.$store.commit('removeFromCart', item);
        this.$store.commit('saveCart');
    },
    },
      computed: {
                totalAmount: function () {
                    var sum = 0;
                    this.$store.state.cart.forEach(e => {
                        sum += parseFloat(e.total);
                    });
                    return sum
                }
            }
}
</script>

Answer 1

嘗試這個：

<template>
  <div> // Here you have a nesting error in your template
    <vue-stripe-checkout
      ref="sessionRef"
      :pk="publishableKey"
      :session-id="sesion"
    >
     <template slot="checkout-button">
       <button @click="$refs.sessionRef.redirectToCheckout()" class="btn-yellow wow fadeInUp btn" style="visibility: visible; animation-name: fadeInUp;">Pagar</button>
     </template>
   </vue-stripe-checkout>
   
  </div>
</template>

<script>
import { StripeCheckout } from 'vue-stripe-checkout';

export default {
   components: {
   'vue-stripe-checkout': StripeCheckout,
  },
  // ...
}
</script>

Answer 2

如果您重命名組件，您仍然需要import中的括號和我們的as

import { StripeCheckout as VueStripeCheckout } from 'vue-stripe-checkout';

請參閱https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

用法：

components: { VueStripeCheckout }

模板中的名稱是 kebab-case：

<vue-stripe-checkout>

此外，擁有有效的 html 確實很重要，因此您需要修復 div 和 template 的嵌套

Answer 3

您導入為VueStripeCheckout並使用vue-stripe-checkout嘗試將其更改為VueStripeCheckout

<VueStripeCheckout
  ref="sessionRef"
  :pk="publishableKey"
  :session-id="sesion"
>
  <template slot="checkout-button">
 <button @click="$refs.sessionRef.redirectToCheckout()" class="btn-yellow wow fadeInUp btn" style="visibility: visible; animation-name: fadeInUp;">Pagar</button>
  </template>
</VueStripeCheckout>