I have implemented two buttons, "Confirm" and "Delete", on my nuxt.js page. Clicking each button triggers the confirm() and delete() functions respectively. Although the code for these functions is almost identical, the URLs they use are different. Interestingly, when delete() is executed, a GET request using axios is successful with the callback working as expected. However, when confirm() is called, the request goes through but the callback doesn't run.
Initially, I suspected that the API server might not be responding. Upon checking the logs, it was clear that the responses were being sent:
1zcu ——> GET /api/pending/delete/5d554a5d9ddb8079158eefcc
1zcu <—— 200 OK 15 B application/json; charset=utf-8 (<—> 326.1 ms)
yefy ——> GET /api/pending/confirm/5d554a5c9ddb8079158eefcb
yefy <—— 200 OK 14 B application/json; charset=utf-8 (<—> 540.9 ms)
To troubleshoot, I changed the URL in the confirm() function to match the one used in the delete() function, which resolved the issue.
Function Definitions
confirm(id) {
this.setConfirming(id);
const url = CON_URL + id;
this.$axios.$get(url).then((res) => {
if (!res.error) {
console.log(res)
this.refresh();
}
});
},
discard(id) {
this.setDeleting(id);
const url = DEL_URL + id;
this.$axios.$get(url).then((res) => {
if (!res.error) {
console.log(res)
this.refresh();
}
});
},
URL Constants
const DEL_URL = "/api/pending/delete/";
const CON_URL = "/api/pending/confirm/";
Button Components
<td v-if="!enquiry.isConfirming"><button v-on:click="confirm(enquiry._id)" class="button is-primary">Confirm</button></td>
<td v-if="!enquiry.isDeleting"><button v-on:click="discard(enquiry._id)" class="button is-danger">Discard</button></td>
Express Endpoints
router.get('/delete/:id', (req, res) => {
Pending.findOneAndDelete({ _id: req.params.id }, (err, pending) => {
if (err) {
res.json({ error: true });
} else {
res.json({ error: false });
}
});
});
router.get('/confirm/:id', (req, res) => {
Pending.findOneAndDelete({ _id: req.params.id }, (err, pending) => {
if (err) {
res.json({ error: true });
} else {
const confirmed = new Booking(pending);
confirmed.save((err, result) => {
if (err) {
res.json({ error: true });
} else {
res.json({ error: false });
}
});
}
});
});