帶條紋JS v3的Vue組件

Question

我爲我的結帳窗體使用了Vue組件。

條紋js（v3）文件包含在標題部分。

的形式是在組件

該組件具有兩個部分。一個是從用戶那裏獲得支付細節，另一個是提交卡細節。

<template> 

    <div class="payment_form"> 
     <div id="payment_details" v-if="showPaymentDetails"> 
     <!-- User input goes here. Like username phone email --> 
     </div> 
     <div id="stripe-form" v-if="showStripeForm"> 
      <form action="/charge" method="post" id="payment-form" @submit.prevent="createStripeToken()"> 
       <div class="form-row"> 
        <label for="card-element"> 
         Credit or debit card 
        </label> 
        <div id="card-element"> 
         <!-- a Stripe Element will be inserted here. --> 
        </div> 

        <!-- Used to display Element errors --> 
        <div id="card-errors" role="alert"></div> 
       </div> 

       <button>Submit Payment</button> 
      </form> 
     </div> 
    </div> 

</template> 
<script> 
    import { Validator } from 'vee-validate'; 
     export default { 

     data() { 
      return { 
       stripeToken: '', 
       showPaymentDetails: true, 
       showStripeForm: true, 
      } 
     }, 
     created() { 
     }, 
     methods: { 
      validateForm() { 
       self = this; 
       this.$validator.validateAll().then(result => { 
        if (result) { 
         // eslint-disable-next-line 
         alert('From Submitted!'); 
         console.log(this.$data); 
         axios.post('/data',{ 
          name:this.name, 
         }) 
         .then(function (response) { 
          self.showStripeForm = true; 
          console.log(response); 
         }) 
         .catch(function (error) { 
          console.log(error); 
         }); 
         return; 
        } 

       }); 
      }, 

      createStripeToken(){ 
       var form = document.getElementById('payment-form'); 
       form.addEventListener('submit', function(event) { 
        event.preventDefault(); 

        window.stripe.createToken(card).then(function(result) { 
         if (result.error) { 
          // Inform the user if there was an error 
          var errorElement = document.getElementById('card-errors'); 
          errorElement.textContent = result.error.message; 
         } else { 
          // Send the token to your server 
          console.log(result.token); 
         } 
        }); 
       }); 
      }, 
      initStripe(){ 
       window.stripe = Stripe('stripe_test_key_here'); 
       var elements = stripe.elements(); 
       var style = { 
        base: { 
         // Add your base input styles here. For example: 
         fontSize: '16px', 
         lineHeight: '24px' 
        } 
       }; 

       // Create an instance of the card Element 
       window.card = elements.create('card', {style: style}); 

       // Add an instance of the card Element into the `card-element` <div> 
       window.card.mount('#card-element'); 

      } 

     }, 
     mounted() { 
      this.initStripe(); 
      setTimeout(function() { 

       this.showStripeForm = false; 
      },2000); 
     } 
    } 
</script> 

我嘗試加載在頁面加載的條紋狀，並嘗試通過showStripeForm禁用元素。

但vue從條帶服務器中取消加載的條形卡表單並將dom保存到其原始狀態。

所以我不能觸發axios回調條形式。

我不希望用戶條紋簽出和條紋js v1（在您自己的表單上獲取輸入在此版本後棄用）。

Answer 1

在mounted。將setTimeout回調更改爲箭頭功能，否則，this將指向Window而不是Vue。

mounted() { 
    setTimeout(() => { 
    this.showStripeForm = false 
    }, 2000) 
} 

此外，您訪問DOM的方式並非如此Vue-ish。您可以在您要在代碼中使用的DOM元素上使用ref。例如：

<form action="/charge" method="post" ref="payment-form" @submit.prevent="createStripeToken()"> 

然後從$refs訪問這樣的：

var form = this.$refs['payment-form'] 
/* 
    Same result as document.getElementById('payment-form') 
    but without using an id attribute. 
*/