从挂载中获取变量到方法中答案

【问题标题】：Getting a variable from mounted into a method从挂载中获取变量到方法中
【发布时间】：2020-07-14 22:09:16
【问题描述】：

我有一个已安装的 Stripe 元素，我将其加载到 mount() 钩子上

 // Create a Stripe client.
    const stripe = Stripe("secret");

    // Create an instance of Elements.
    const elements = stripe.elements();
    // Create an instance of the card Element.
    const style = {
      base: {
        color: "#32325d",
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: "antialiased",
        fontSize: "16px",
        "::placeholder": {
          color: "#aab7c4"
        }
      },
      invalid: {
        color: "#fa755a",
        iconColor: "#fa755a"
      }
    };

    let card = elements.create("card", { style: style });
    // Add an instance of the card Element into the `card-element` <div>.
    card.mount("#card-element");

    // Handle real-time validation errors from the card Element.
    card.addEventListener("change", function(event) {
      var displayError = document.getElementById("card-errors");
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = "";
      }
    });

文档中的标准之一

然后我滚动一个方法来执行付款意图并处理卡付款

所以我的问题是下面的代码似乎不知道条纹实例

 let card = Element;
          if (selectedCard) {
            card = {
              payment_method: selectedCard
            };
          }

          //var stripe = Stripe("secret");
          stripe.handleCardPayment(response.data.data.client_secret, card).then(function(result) {
                console.log(result)
            });

有没有办法让整个页面都知道那个挂载的实例，我尝试将它们添加到数据点无济于事

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您应该将 Stripe 实例存储在 Vue 组件本身上，以便您可以从该组件的其他方法访问它：

mounted() {
  // Initialize Stripe
  this.stripe = Stripe('secret');

  // Blah blah more Stripe initialization code
},

methods: {
  performPayment() {
    // Now you can access the Stripe instance from this
    this.stripe.handleCardPayment(...)
  }
}

【讨论】：