Vue.js是一个流行的JavaScript框架,可以用于构建现代Web应用程序。在Vue.js中,可以通过Vue组件与后端的API进行交互以实现多条删除。
以下是利用Vue.js结合后端实现多条删除的步骤:
<template>
<div>
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users" :key="index">
<td><input type="checkbox" v-model="selected" :value="user.id"></td>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
<button @click="deleteSelected">Delete Selected</button>
</div>
</template>
添加Vue组件的数据属性。selected数组用于存储所选记录的ID,而users数组用于存储从后端API获取的所有记录。
<script>
export default {
data() {
return {
selected: [],
users: []
};
},
...
};
</script>
加Vue组件的方法,该方法将向后端API发送删除请求,并在成功删除后更新用户列表。
<script>
import axios from 'axios';
export default {
data() {
return {
selected: [],
users: []
};
},
mounted() {
axios.get('/api/users').then(response => {
this.users = response.data;
});
},
methods: {
deleteSelected() {
axios.post('/api/users/delete', { ids: this.selected }).then(response => {
const deletedIds = response.data;
this.users = this.users.filter(user => !deletedIds.includes(user.id));
this.selected = [];
});
}
}
};
</script>
后端API中添加处理多条删除请求的路由和控制器方法。在这个例子中,我们使用Express.js作为后端框架,Mongoose作为数据访问层