CODEWITHSUNDEEP
vue.js
TheNastyPasty
TheNastyPasty

Reputation: 69

Want to update my input value with v-model

I am trying to change the value of an hidden input with vue js. I added a v-model to the input and I am trying to update it in a method.

My input looks like this:

<input type="hidden" name="payment_method" v-model="payment_method">

My vue js:

data: function() {
      return {
        name: '',
        payment_method: '',
.
.
.
methods: {
        submitAddPaymentMethod(){
          window.stripe.handleCardSetup(
            this.clientSecret, card, {
                payment_method_data: {
                    //billing_details: { name: cardHolderName.value }
                }
            }
          ).then(function(result) {
              if(result.error) {
                  var errorElement = document.getElementById('card-errors');
                  errorElement.textContent = result.error.message;
              } else {
                  // has no effect on my input
                  this.payment_method = result.setupIntent.payment_method; 
                  this.$refs.form.submit();
              }
          }.bind(this));

Maybe someone has an idea how to do this. Would appreciate that!

Best

Upvotes: 0

Views: 208

Answers (2)

TheNastyPasty
TheNastyPasty

Reputation: 69

I needed to add nextick() to wait for the DOM to be updated.

Upvotes: 0

Radu Diță
Radu Diță

Reputation: 14171

You are getting a different this in the promise callback than the one you're expecting.

Use fat arrow to solve this.

.then(result => {
   if(result.error) {
     var errorElement = document.getElementById('card-errors');
     errorElement.textContent = result.error.message;
   } else {
      // has no effect on my input
      this.payment_method = result.setupIntent.payment_method; 
      this.$refs.form.submit();
   }
}

Upvotes: 2

Related Questions