Vue.js 无法解析组件：google—pay—button

发布于04月08日

我正在try 通过Gpay在vue js中使用Google—pay—button支付集成.但我收到警告—Failed to resolve component: google-pay-button

我的密码—

<google-pay-button
    environment="TEST"
    v-bind:button-type="buttonType"
    v-bind:button-color="buttonColor"
    v-bind:existing-payment-method-required="existingPaymentMethodRequired"
    v-bind:paymentRequest.prop="{
        apiVersion: paymentRequest.apiVersion,
        apiVersionMinor: paymentRequest.apiVersionMinor,
        allowedPaymentMethods: paymentRequest.allowedPaymentMethods,
        merchantInfo: paymentRequest.merchantInfo,
        transactionInfo: transactionInfo,
        callbackIntents: callbackIntents,
    }"
    v-on:loadpaymentdata="onLoadPaymentData"
    v-on:error="onError"
    v-bind:onPaymentAuthorized.prop="onPaymentDataAuthorized">
</google-pay-button>

<script>
    import "@google-pay/button-element";
    export default {
        ...
    }
</script>

我期待有应该显示谷歌支付按钮，但它显示警告.

推荐答案

这是一个警告.然而，该元素仍然需要生成.错误的原因是@google-pay/button-element不是Vue组件，但他们正在寻找名为<google-pay-button>的元素来显示按钮.

Vue.js旨在帮助开发，因此它表明<google-pay-button>是一个未声明的组件，确认您是否打算以这种方式使用它.这些特殊命名的元素可以放在例外列表中.我将演示如何使用Vite.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const customElements = ['google-pay-button'];

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // consider any tag with a dash as a custom element
          isCustomElement: (tag) => customElements.includes(tag), // can write any condition here, the key is to cover all your custom components, even if it's as simple as tag.startsWith("google-pay-") or any other
        },
      },
    }),
  ],
});