vue实现删除用户表单
时间: 2023-07-27 07:05:53 浏览: 86
要实现删除用户表单,需要先在页面中显示出用户列表,并且每个用户都有一个删除按钮。当用户点击删除按钮时,需要向服务器发送一个请求,告诉服务器要删除哪个用户。服务器收到请求后,会删除相应的用户,并且返回一个响应给客户端,告诉客户端是否删除成功。
在 Vue 中,可以使用 v-for 指令来循环渲染用户列表,并且为每个用户添加一个删除按钮。当用户点击删除按钮时,可以使用 axios 库向服务器发送一个 DELETE 请求,删除相应的用户。在成功删除用户后,可以通过重新获取用户列表来更新页面。
以下是一个简单的示例代码,演示如何在 Vue 中实现删除用户表单:
```
<template>
<div>
<h2>用户列表</h2>
<table>
<thead>
<tr>
<th>用户名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="user in userList" :key="user.id">
<td>{{ user.name }}</td>
<td><button @click="deleteUser(user.id)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
userList: [],
};
},
mounted() {
this.fetchUserList();
},
methods: {
fetchUserList() {
axios.get('/api/user').then(response => {
this.userList = response.data;
});
},
deleteUser(id) {
axios.delete(`/api/user/${id}`).then(() => {
this.fetchUserList();
});
},
},
};
</script>
```