Question

我正在使用带有VueJS的Stripe来提交无需页面刷新的表单，我具有Stripe的功能，因此这不一定与Stripe有关。

这些方法在同一组件中。

填写表格后，将调用此方法来创建卡令牌（异步函数）

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函数，根本没有被调用。

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，但是当输入标签的值更改时也不会调用。

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

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

Answer 1

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

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

这应该可以解决您的问题。如果没有bind（this），则this.token也仅在您的函数中可用，而未在data属性中设置。

异步功能回调未调用VueJS方法

1 个答案: