CODEWITHSUNDEEP
javascriptasynchronousvue.js
Zac
Zac

Reputation: 2081

VueJS Method Not Being Called on Async Fuction Callback

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?

Upvotes: 0

Views: 479

Answers (1)

coud28098
coud28098

Reputation: 161

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.

Upvotes: 1

Related Questions