vue遍历数组 对数组中的值可进行编辑、删除,然后把修改后的值,通过发送请求给后台,vue代码如何实现
时间: 2023-06-12 22:02:17 浏览: 76
可以使用v-for指令遍历数组,并在每个元素上绑定一个事件进行编辑和删除操作。当编辑或删除操作完成后,可以通过axios或其他HTTP库发送请求给后台。
以下是一个简单的示例代码:
```html
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
<input v-model="item.value" @blur="updateItem(index)" />
<button @click="deleteItem(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items: [
{ id: 1, value: 'item 1' },
{ id: 2, value: 'item 2' },
{ id: 3, value: 'item 3' }
]
};
},
methods: {
updateItem(index) {
const item = this.items[index];
axios.post('/api/updateItem', { id: item.id, value: item.value });
},
deleteItem(index) {
const item = this.items[index];
axios.post('/api/deleteItem', { id: item.id });
this.items.splice(index, 1);
}
}
};
</script>
```
注意,在实际开发中,我们应该把接口地址和请求参数等信息放在配置文件或常量模块中,以便于维护和修改。同时,我们需要在发送请求时考虑网络延迟和错误处理等问题。