3

我正在尝试在我的 VueJS 应用程序中使用 AmazonPay。我能够加载 javascript，但是当我尝试显示按钮时出现错误。似乎有很多 AmazonPay 的例子，但 VueJS 没有。

这是 Javascript 控制台错误：

Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
    at Object.C.Button (Widgets.js:2)
    at window.onAmazonPaymentsReady (playmix.vue?4ede:39)
    at Widgets.js:2
    at Widgets.js:2
    at HTMLScriptElement.a (Widgets.js:2)

我将要由 Amazon javascript 调用的 javascript 放在组件的已安装部分中：

 mounted() {
    window.onAmazonLoginReady = function () {
      amazon.Login.setClientId(
        "CLIENT_ID"
      );
    };
    window.onAmazonPaymentsReady = function () {
      showButton();
    };
    function showButton() {
      var authRequest;
      OffAmazonPayments.Button(
        "AmazonPayButton",
        "CLIENT_ID",
        {
          type: "PwA",
          color: "Gold",
          size: "medium",
          authorization: function () {
            loginOptions = { scope: "profile", popup: "false" };
            authRequest = amazon.Login.authorize(
              loginOptions,
              "https://localhost/test"
            );
          },
        }
      );
    }
    let amazonpay = document.createElement("script");
    amazonpay.setAttribute(
      "src",
      "https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js"
    );
    amazonpay.setAttribute("type", "text/javascript");
    amazonpay.async = true;
    document.head.appendChild(amazonpay);
},

在我的组件中，我有一个标签。我找到了 AmazonPay 的 React 包，但到目前为止我还没有找到很多在 Vue 中使用的示例。Vue 有一个成熟的商业库，但对我的项目来说似乎有点过分了。关于如何解决这个问题的任何想法？

4

1 回答 1

1

我刚刚遇到了同样的问题，并通过showButton()使用 Vue 的.$nextTick()函数包装调用来解决它。一旦模板完成渲染，这将运行您的函数。

如果您只是在您的部分中替换它，则以下内容应该适用于您的示例mounted()。

如果你可以使用 ES6：

window.onAmazonPaymentsReady = () => {
  this.$nextTick(function(){
    showButton();
  })
};

如果没有，那么这应该工作：

var that = this;
window.onAmazonPaymentsReady = function () {
  that.$nextTick(function(){
    showButton();
  })
};
于 2021-01-27T18:40:05.323 回答