VueJS Method Not Being Called on Async Fuction Callback

Question

I'm using stripe with VueJS for a form to be submitted without page refresh, I have the stripe functionality working so this isn't necessarily Stripe related.

These methods are within the same component.

When form is filled out, this method gets called to create the card token ( the async function )

tokenize : function(){
        console.log("tokenizing");

        this.stripe.createToken(this.card.number).then(function(result) {
            console.log(result);
            if (result.error) {
                // Inform the customer that there was an error.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
                console.log(result.error.message);
            } else {
                this.token = result.token.id; // the token i need
                console.log(this.token); // token gets printed out in log
                this.submit(); // <<<<<<<<< THIS IS THE METHOD NOT BEING CALLED

            }
        });
    },

This is the submit function, it's not getting called at all.

submit : function(){
        console.log(this.token); // <<<<<<< NOTHING GETS PRINTED, DOESN"T ENTER THIS METHOD AT ALL
        console.log("here, token added");
        if(!document.getElementById('agreement').checked){
            this.$root.notify("You must agree to the terms.","danger");
            return;
        }
        console.log("about to send body");
        var body = {
            _token : this.$root.csrf,
            _method : "PUT",
            stripeToken : token,
            name : this.name,
            agreement : true,
        };
        console.log(body);
        console.log("pre axios");
        axios.put((window.location.origin + "/billing/" + this.$root.user.company_id),body).then(response => {
            this.my_billing = response.data;
            this.$root.notify("Card has been successfully added!","success");
            this.bEditMode = false;
        }).catch(error => { 
            this.$root.notify("Failed to add new card.","danger");
        });
    },

I've also tried setting an input tag to the value of this token, then having an @change on the input tag, but that doesn't called either when the value of the input tag changes.

I've also tried making my this.token a computed property with setters and getters, basically call this.submit when token is set. This does not work either.

Why isn't this method being called? I've called functions within async callbacks before, but is there something I'm missing?? Better yet, any other possible solutions get around this?

What does console.log(this) print? this is global within an anonymous function passed to .then() — guest271314
– guest271314, Commented Feb 23, 2019 at 21:41

coud28098 · Accepted Answer · 2019-02-23 22:02:33Z

1

You need to bind 'this' to your function.

this.stripe.createToken(this.card.number).then(function(result) {
....
}.bind(this));

This should fix your problem. Without the bind(this), this.token is also only available in your function and not set in your data property.

answered Feb 23, 2019 at 22:02

coud28098

1716 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sumurai8 Over a year ago

That, or just use arrow functions.

trueChazza Over a year ago

agree with all the above

Collectives™ on Stack Overflow

VueJS Method Not Being Called on Async Fuction Callback

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related