VueJS和AmazonPayButton javascript错误

问题描述

我正在尝试在我的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有一个功能完善的商业图书馆，但是对于我的项目而言似乎有些过时了。 关于如何解决此问题的任何想法？

解决方法

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

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

如果你可以使用 ES6：

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

如果没有，那么这应该有效：

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