javascript - VueJS 和 AmazonPayButton javascript 错误

Question

我正在尝试在我的 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 有一个完整的商业库，但对我的项目来说似乎有点过分了。关于如何解决此问题的任何想法？

Answer 1

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

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

如果你可以使用 ES6:

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

如果没有，那么这应该可行:

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