Well, I have the same problem. When I create a petition with axios it works properly, but when I have nested axios petitions the page refreshes automatically. And I can't figure out what is the problem.
I am using evt.preventDefault() and return false; but none of them seem work.
When I call this single function everything works fine:
addSport(payload) {
const path = 'http://localhost:5000/sports';
axios.post(path, payload)
.then(() => {
this.getSports();
this.message = 'Sport Added!';
this.showMessage = true;
return false;
})
.catch((error) => {
// eslint-disable-next-line
console.error(error);
});
return false;
}
and I call it:
this.uploadImage(formData, this.addSports, payload);
But, when I try to use this one, the page is reloading after two calls are executed:
uploadImage(formData, callback, payload) {
const path = 'http://localhost:5000/upload';
axios.post(path, formData)
.then((response) => {
callback({
sport_id: payload.sport_id,
name: payload.name,
logo_url: response.data.logo_url,
});
return false;
})
.catch((error) => {
// eslint-disable-next-line
console.error(error);
});
return false;
},
addSport(payload) {
const path = 'http://localhost:5000/sports';
axios.post(path, payload)
.then(() => {
this.getSports();
this.message = 'Sport Added!';
this.showMessage = true;
return false;
})
.catch((error) => {
// eslint-disable-next-line
console.error(error);
});
return false;
}
The way I call it is:
this.uploadImage(formData, this.updateDeporte, payload);
Can anyone help me to figure out how can I fix that?