CODEWITHSUNDEEP
javascriptvue.js
user1012181
user1012181

Reputation: 8726

Cannot get data passed from one function

I've a Vue component as follows:

    import '../forms/form.js'
    import '../forms/errors.js'

    export default{
        data(){
            return{
                form: new NewForm({
                    email: '',
                    password: '',
                    intendedUrl: '',
                    message: ''
                })
            }
        },

        methods: {
            /**
             * Login the user
             */
            login(e) {
                e.preventDefault();

                this.form.startProcessing();

                this.$http.post('/login/authenticate', this.form)
                        .then(function(response) {
                            this.form.finishProcessing();
                        },
                        function(response) {
                            this.form.setErrors(response.data);
                        });
            }
        }
    }

The form.js file is

window.NewForm = function (data) {
    var form = this;

    $.extend(this, data);
    this.errors = new NewFormErrors();

    this.busy = false;
    this.successful = false;

    this.startProcessing = function () {
        form.errors.forget();
        form.busy = true;
        form.successful = false;
    };

    this.setErrors = function (errors) {
        console.log('okkk');
        form.busy = false;
        form.errors.set(errors);
    }
};

and error.js

window.NewFormErrors = function () {
    this.errors = {};

    this.set = function (errors) {
        console.log(errors);
        this.errors= errors;
    };
};

Here, the this.form.startProcessing(); seems working. But I'm not able to get the data passed to the this.setErrors. console.log(errors) returns nothing. Or it's not getting executed.

Upvotes: 0

Views: 95

Answers (1)

neojg
neojg

Reputation: 221

I have not recreated all of your solution but I will suspect the meaning of the value of this in the deferred execution so I will try to modify the code to:

login(e) {
    e.preventDefault();
    var that = this ;
    this.form.startProcessing();

    this.$http.post('/login/authenticate', this.form)
         .then(function(response) {
                  that.form.finishProcessing();},
               function(response) {
                  that.form.setErrors(response.data); });
   }

I hope it will help.

Upvotes: 1

Related Questions