As I work on developing my website, I've encountered some challenges. Being new to coding, I'm struggling with creating a functional delete user button. When I click delete, it redirects me to the delete URL but doesn't remove the entry from my home table or MySQL database. Any advice would be greatly appreciated. Below is the code related to the issue:
Home Page Table;
<template>
<div class="between:flex bottom:margin-3">
<div class="center: flex-items">
<!-- This section contains the template for showing entries in a table -->
</div>
</div>
<div id="tableHolderDiv">
<table class="table table-striped">
<!-- Table headings -->
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Location</th>
<th scope="col">End User</th>
<th scope="col">Order Number</th>
<th scope="col">Date</th>
<th scope="col">Application</th>
<th scope="col">Service Tech</th>
<th scope="col">Department</th>
<th scope="col">Hours</th>
<th scope="col">Travel Hours</th>
<th scope="col">Contact Name</th>
<th scope="col">Reason</th>
</tr>
</thead>
<tbody>
<!-- Displaying rows of data and each row has a delete button -->
<tr v-for="row in serviceEntries" :key="row.id" @click="alertID(row.id)">
<td scope="row">{{ row.id }}</td>
<td>{{ row.location }}</td>
<td>{{ row.end_user }}</td>
<td>{{ row.order_number }}</td>
<!-- Other table cell values -->
<a href="/delete/{{this.id}}" type="button" class="btn btn-light btn-small" onclick="event.stopPropagation(); return confirm('Are you sure you want to delete this entry?');">
<i class="bi bi-trash"></i> Delete
</a>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: "ServiceTable",
computed: {
serviceEntries() {
return this.$store.state.serviceEntries;
},
},
methods: {
// Method to handle click on a row
alertID(id) {
this.$router.push({
path: `/modify/${id}`,
});
},
},
};
</script>
The only Delete Call; in my app.js
app.delete("/api/service/:id", (req, res) => {
pool.query(
"DELETE FROM `master` WHERE id = ?",
[req.params.id],
function (error, results, fields) {
if (error) res.json(error);
else res.json(results);
}
);
});
Do I possibly need to add an app.post for delete?