用vue发送axios请求多个id删除用户
时间: 2023-07-28 11:13:44 浏览: 115
Vue中 axios delete请求参数操作
首先,你需要在Vue组件中定义一个选中用户ID的数组,用来存储用户选中的ID:
```js
data() {
return {
selectedIds: []
}
}
```
接下来,你需要在模板中显示用户列表,并且提供一个复选框用来选中要删除的用户:
```html
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<input type="checkbox" :value="user.id" v-model="selectedIds">
</td>
</tr>
</tbody>
</table>
<button @click="deleteUsers">Delete Selected Users</button>
</div>
```
在这个模板中,我们使用 `v-for` 指令来循环显示用户列表,并且在每个用户行中添加一个复选框。当用户选中一个复选框时,我们使用 `v-model` 指令将用户ID添加到 `selectedIds` 数组中。
最后,你需要在Vue组件中添加一个 `deleteUsers` 方法,用来发送axios请求删除选中的用户:
```js
methods: {
deleteUsers() {
axios.post('/api/users/delete', { ids: this.selectedIds })
.then(response => {
// 删除成功
console.log(response.data)
})
.catch(error => {
// 删除失败
console.error(error)
})
}
}
```
在这个方法中,我们使用 `axios.post` 发送一个带有选中用户ID的JSON数据到 `/api/users/delete` 接口。当请求成功时,我们将打印响应数据到控制台。否则,我们将打印错误信息到控制台。
以上就是用Vue发送axios请求多个ID删除用户的方法。
阅读全文