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和模板的嵌套

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>

未知的自定义元素：<vue-stripe-checkout>-您是否正确注册了组件？

3 个答案: