Question

我试图避免让用户在输入为空时提交条纹表单，我使用stripe.js元素集成来呈现我的表单并在vue组件中处理表单提交。

this.cardNumberElement.on('change', this.enableForm);
this.cardExpiryElement.on('change', this.enableForm);
this.cardCvcElement.on('change', this.enableForm);

在检查了文档之后，我尝试在输入中使用change事件，但这不能正常工作，因为用户无法输入任何内容并单击“提交”按钮。

这是我的组件：

mounted()
{
    console.log(this.$options.name + ' component succesfully mounted');

    this.stripe = Stripe(this.stripePK);
    this.elements = this.stripe.elements();

    this.cardNumberElement = this.elements.create('cardNumber', {style: this.stripeStyles});
    this.cardNumberElement.mount('#card-number-element');
    this.cardExpiryElement = this.elements.create('cardExpiry', {style: this.stripeStyles});
    this.cardExpiryElement.mount('#card-expiry-element');
    this.cardCvcElement = this.elements.create('cardCvc', {style: this.stripeStyles});
    this.cardCvcElement.mount('#card-cvc-element');

    let stripeElements = document.querySelectorAll("#card-number-element, #card-expiry-element, #card-cvc-element");
    stripeElements.forEach(el => el.addEventListener('change', this.printStripeFormErrors));
    this.cardNumberElement.on('change', this.enableForm);
    this.cardExpiryElement.on('change', this.enableForm);
    this.cardCvcElement.on('change', this.enableForm);
},

methods: 
{
    ...mapActions('Stripe', ['addSource', 'createSourceAndCustomer']),
    ...mapMutations('Stripe', ['TOGGLE_PAYMENT_FORM']),
    ...mapMutations('Loader', ['SET_LOADER', 'SET_LOADER_ID']),

    enableForm:function(event){
        if(event.complete){
            this.disabled = false;
        }
        else if(event.empty){
            this.disabled = true;
        }
    },


    submitStripeForm: function()
    {
        this.SET_LOADER({ status:1, message: 'Procesando...' });
        var self = this;

        this.stripe.createSource(this.cardNumberElement).then(function(result) {
            if (result.error) {
                self.cardErrors = result.error.message;
            }
            else {
                self.stripeSourceHandler(result.source.id);
            }
        });   
    },


    stripeSourceHandler: function(sourceId)
    {
        console.log('stripeSourceHandler');

        this.cardNumberElement.clear();
        this.cardExpiryElement.clear();
        this.cardCvcElement.clear();

        if(this.customerSources.length == 0)
        {
            console.log('createSourceAndCustomer');
            this.createSourceAndCustomer({ id: sourceId });
        }
        else
        {
            console.log('addSource');
            this.addSource({ id: sourceId });
        }
    },


    printStripeFormErrors: function(event)
    {
        if(event.error)
        {
            self.cardErrors = event.error.message
        } 
        else
        {
            self.cardErrors = '';
        }
    }  
}

Answer 1

鉴于条纹文档，事件的使用似乎是正确的（尽管可以使用this.disabled = !event.complete来覆盖错误情况，而不仅是空情况可以有所改善）。

您可以尝试在事件回调enableForm中console.log来检查事件是否触发成功。

无论如何，它更有可能来自禁用提交按钮的逻辑，并且错过了您的帖子。我在下面创建了一个伪造的安全组件，该组件在值更改时会触发change事件。

容器组件中有趣的部分：

默认情况下，通过数据disabled禁用提交，

complete

提交。如果为false，则将其禁用。

希望它可以帮助您集中精力解决问题。

/**
Mock component to emulate stripes card element behavior with change event
*/
const SecureInput = {
  template: '<input type="text" v-model="cardnumber"/>',
  data: () => ({
    cardnumber: null
  }),
  watch: {
    cardnumber: function(val) {
      if(!val) {
        this.$emit('change', {empty: true, error: false, complete: false});
        return;
      }
      
      if(val.length < 5) {
        this.$emit('change', {empty: false, error: true, complete: false});
        return;
      }
      
       this.$emit('change', {empty: false, error: false, complete: true});
    }
  }
}

/* Logic is here */
const app = new Vue({
  el: '#app',
  components: {
    SecureInput
  },
  data: {
    disabled: true
  },
  methods: {
    updateDisable: function(event) {
      this.disabled = !event.complete;
    }
  }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form @submit.prevent="$emit('submitted')">
    <p><secure-input @change="updateDisable"/></p>
    <p><input type="submit" :disabled="disabled"/></p>
  </form>
</div>

条纹js：不要让空表格发送

1 个答案: