[英]How do I get my delete function to work in Vue JS?
我正在开发一个网站,我遇到了一些问题。 我对编码很陌生,所以请原谅我的新手,但我很难创建一个功能性的删除用户按钮。 当我单击删除时,它会带我删除 url,但不会从我的主表或 mysql 数据库中删除。 如果有任何建议可以幸免,将不胜感激。 这是应该与问题相关的代码。
主页表;
<template>
<div class="between:flex bottom:margin-3">
<div class="center: flex-items">
<span class="right:margin-1">Show</span>
<select v-model="currentEntries" class="select" @change="paginateEntry">
<option v-for="se in showEntries" :key="se" :value="se">
{{ se }}
</option>
</select>
<span class="left:margin-1">Entries</span>
<div class="end:flex"></div>
</div>
</div>
<div id="tableHolderDiv">
<table class="table table-striped">
<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>
<tr
v-for="row in serviceEntries"
:key="row.id"
@click="alertID(row.id)"
>
<th scope="row">{{ row.id }}</th>
<td>{{ row.location }}</td>
<td>{{ row.end_user }}</td>
<td>{{ row.order_number }}</td>
<td>{{ row.date }}</td>
<td>{{ row.application }}</td>
<td>{{ row.service_tech }}</td>
<td>{{ row.department }}</td>
<td>{{ row.hours }}</td>
<td>{{ row.travel_hours }}</td>
<td>{{ row.contact_name }}</td>
<td>{{ row.reason }}</td>
<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: {
alertID(id) {
this.$router.push({
path: `/modify/${id}`,
});
},
},
};
</script>
唯一的删除呼叫; 在我的 app.js
app.delete("/api/service/:id", (req, res) => {
// console.log("DELETE /api/user/" + req.params.id + " called");
pool.query(
"DELETE FROM `master` WHERE id = ?",
[req.params.id],
function (error, results, fields) {
if (error) res.json(error);
else res.json(results);
}
);
});
我是否可能需要添加一个 app.post 进行删除?
a
标签正在使用 GET 请求,而您需要 DELETE 请求。 使用button
和处理程序,您可以在其中使用一些got
,如axios
或发出此类请求(以及其他 GET、POST、PUT)。
<button
class="btn btn-light btn-small"
onclick="onDelete">
<i class="bi bi-trash"></i>
Delete
</button>
<script>
import axios from 'axios';
export default {
methods: {
async onDelete() {
if(!confirm('Are you sure you want to delete this entry?') {
return
}
await axios.delete(`/delete/${this.id}`);
},
alertID(id) {
this.$router.push({
path: `/modify/${id}`,
});
},
},
};
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.