异步函数回调未调用 VueJS 方法

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

我还尝试将输入标记设置为此标记的值，然后在输入标记上添加@change，但是当输入标记的值更改时也不会调用。

我还尝试使用 setter 和 getter 将我的 this.token 设为计算属性，基本上在设置令牌时调用 this.submit。这也不起作用。

为什么不调用这个方法？我之前在异步回调中调用过函数，但是我缺少什么吗？更好的是，还有其他可能的解决方案可以解决这个问题吗？

Answer 1

您需要将“this”绑定到您的函数。

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

这应该可以解决您的问题。 如果没有 bind(this)，this.token 也只能在您的函数中使用，而不是在您的 data 属性中设置。