Метод VueJS не вызывается при асинхронном обратном вызове Fuction

Question

Я использую полосу с VueJS для формы, которая будет отправлена ​​без обновления страницы, у меня есть работающая полоса, так что это не обязательно связано с полосой.

Эти методы находятся в одном компоненте.

Когда форма заполнена, вызывается этот метод для создания токена карты (асинхронная функция)

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

            }
        });
    },

Это функция отправки, она вообще не вызывается.

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");
        });
    },

Я также попытался установить для тега input значение этого токена, затем добавив @change к тегу input, но он также не вызывается при изменении значения тега input.

Я также пытался сделать мое this.token вычисляемым свойством с помощью сеттеров и геттеров, в основном вызывая this.submit, когда токен установлен.Это тоже не работает.

Почему этот метод не вызывается?Я уже вызывал функции в асинхронных обратных вызовах, но что-то мне не хватает ??А еще лучше, есть ли другие возможные решения?

Answer 1

Вам необходимо привязать «this» к вашей функции.

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

Это должно решить вашу проблему.Без привязки (this) this.token также доступен только в вашей функции и не устанавливается в свойстве data.