【问题标题】:vuejs failed to compile paypal is not defined while using paypal sdk / paypal checkoutvuejs failed to compile paypal is not defined while using paypal sdk / paypal checkout
【发布时间】:2021-04-02 23:40:47
【问题描述】:

在我的 vuejs 项目中整合 paypal sdk 时遇到以下问题

 55:5  error  'paypal' is not defined  no-undef

index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script src="https://www.paypal.com/sdk/js?client-id=sb"></script>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Checkout.vue

<template>
  <div class="checkout"></div>
</template>

<script>

export default {
  props: {
    amount: {
      type: Number,
      default: 0.01
    }
  },

  mounted: function(){
    paypal.Buttons().render('.checkout')
  }
}
</script>

我想要实现的是,每次都渲染贝宝按钮,加载视图。看来,我错过了什么。

  1. 我也尝试使用 vue-plugin-load-script 但它给了我同样的错误
  2. 我没有使用checkout.js,paypal 似乎不再支持它

如果我在 index.html 中添加 paypal.Buttons().render('.checkout') 函数调用,就在 paypal js 脚本标记下方,它似乎可以工作。但它只会在第一次加载应用程序时加载按钮。如果没有找到带有“checkout”类的 div 容器,它也会报错。

所有研究要么为我提供旧版本和已弃用版本的结果,要么对我不起作用。我做错了什么?

谢谢

【问题讨论】:

    标签: javascript vuejs2 paypal checkout


    【解决方案1】:

    看来,这个错误是由 eslint 引起的。删除 eslit 后它似乎工作:

    npm remove @vue/cli-plugin-eslint

    但是我想知道,如何在不删除 eslint 的情况下解决这个问题。

    【讨论】:

      猜你喜欢
      • 2021-08-30
      • 2023-04-04
      • 2020-07-31
      • 2021-10-10
      • 2014-02-27
      • 2016-12-02
      • 2021-08-27
      • 2017-09-12
      • 2021-09-07
      相关资源
      最近更新 更多