无法读取未定义的 vuejs 组件的属性“stripeTokenHandler”

Question

我正在用 vuejs 构建一个支付表单，它包括条纹 js。 这是我的卡片元素：

            <!-- CARD form -->
            <label class="mt-5 font-20px"> Tarjeta </label>
            <div class="mt-4"> Número </div>
            <div class="row mt-2">
              <div class="col-md-12">
                <div id="card-number-element" class="form-control rounded-pill" placeholder="**** **** **** ****"> </div>
              </div>
            </div>

            <div class="row">
              <div class= "col-md-6 mt-3">
                <span> Nombre de la Tarjeta </span></br>
                <input type="input" id="card-name-element" class="form-control rounded-pill" placeholder ="Juan Pérez"> </input>
              </div>

              <div class= "col-md-3 col-6 mt-3">
                <span> Expiración </span></br>
                <div id="card-expiry-element" class="form-control rounded-pill" placeholder ="MM / YY"> </div>
              </div>

              <div class= "col-md-3 col-6 mt-3">
                <span> CCV </span></br>
                <div id="card-cvc-element" class="form-control rounded-pill" placeholder ="***"> </div>
              </div>
            </div>

            <div class="row mt-3">
              <div id="card-error text-danger"></div>
              <div id="card-success">
                Your Stripe token is <span class="token text-success"></span>
              </div>
            </div>

我在安装的 function 中初始化了条带元素：

  initStripeElements(){
      cardNumberElement = elements.create('cardNumber', { placeholder: '**** **** **** ****', });
      cardNumberElement.mount('#card-number-element');

      var cardExpiryElement = elements.create('cardExpiry', { placeholder: 'MM / YY', });
      cardExpiryElement.mount('#card-expiry-element');

      var cardCvcElement = elements.create('cardCvc', { placeholder: '***', });
      cardCvcElement.mount('#card-cvc-element');            
    },

  mounted() {
    this.initStripeElements();
  }

一切正常，可以检索和返回条带卡令牌。 之后我调用： this.stripeTokenHandler(result.token.id); 将令牌和数据发送到服务器

    submitForm(e) {
      e.preventDefault();
      this.submitted = true;

      if (this.formInvalid()) {
        return;
      }
      var options = {
        name: document.getElementById('card-name-element').value,
      };

      stripe.createToken(cardNumberElement, options).then(function(result) {
        var successElement = document.querySelector('.card-success');
        var errorElement = document.querySelector('.card-error');

        if (result.token) {
          successElement.querySelector('.token').textContent = result.token.id;
          this.stripeTokenHandler(result.token.id);
        } else if (result.error) {
          errorElement.textContent = result.error.message;
        }

        console.log(this)
      });


      if (this.cardError) {
        return;     
      }
      // this.nextStep();
    },

这个调用永远不会起作用，因为它总是显示错误：

Finaliza.vue:415 Uncaught (in promise) TypeError: Cannot read property 'stripeTokenHandler' of undefined

你能帮忙吗，我在这里做错了什么？

Answer 1

通过某种方式，该变量在条带 scope 内变得未定义。 所以我可以通过将此变量保存在条带回调之外来解决问题。

      var context = this;
      stripe.createToken(cardNumberElement, options).then(function(result) {
        var successElement = document.querySelector('.card-success');
        var errorElement = document.querySelector('.card-error');

        if (result.token) {
          successElement.querySelector('.token').textContent = result.token.id;
          context.stripeTokenHandler(result.token.id);
        } else if (result.error) {
          errorElement.textContent = result.error.message;
        }
      });