One of my Vue components looks like this:
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 implementation is as follows:
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 the error.js file contains the following code:
window.NewFormErrors = function () {
this.errors = {};
this.set = function (errors) {
console.log(errors);
this.errors= errors;
};
};
Although the this.form.startProcessing(); function seems to be working, I am facing difficulties in retrieving the data passed to the this.setErrors function. When I try to console.log(errors), it returns nothing or does not seem to execute properly.