Struggling with an async validation process in Vue.js where I need to globally access the $axios instance, but encountering failures
Validator.extend('async_validate_job_type', {
getMessage: field => `The Name already exists`,
validate: value => new Promise((resolve) => {
//validate email.
this.$axios.post('/validate/position-type', {email:value})
.then(
....performing actions here
)
})
});
Unfortunately, the above implementation is causing an error:
cannot read property post of undefined
In other components, using this.$axios.post works fine. However, it seems that I am unable to access this.$axios in the current context. What could be the issue?
I have already declared axios globally like so:
Vue.prototype.$axios = axios.create(axiosConfig);
Even attempting a normal function approach like below yields failure:
Validator.extend('async_validate_job_type', {
getMessage: field => `The Name already exists`,
validate(value){
return new Promise((resolve) => {
console.log("value of this is", this); //this is undefined
this.$axios.post())
})
}
});