使用Vue的v-for指令遍历数组,通过v-model指令将每一项数据绑定到表单元素上,实现数据的编辑。同时,在每一项数据的旁边添加一个删除按钮,通过点击按钮触发事件,从数组中删除该数据。最后,您可以通过触发提交按钮的事件,将修改后的数组提交给后台更新数据。
时间: 2023-06-12 21:02:24 浏览: 91
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
这个问题是关于Vue的具体实现,以下是大致思路:
1. 使用v-for指令遍历数组,渲染出表单元素;
2. 使用v-model指令将每一项数据绑定到表单元素上,实现数据的编辑;
3. 在每一项数据的旁边添加一个删除按钮,通过点击按钮触发事件,从数组中删除该数据;
4. 通过触发提交按钮的事件,将修改后的数组提交给后台更新数据。
具体实现代码如下:
```html
<template>
<div>
<form>
<div v-for="(item, index) in data" :key="index">
<input v-model="item.name" />
<input v-model="item.age" />
<button type="button" @click="deleteItem(index)">删除</button>
</div>
<button type="button" @click="submitData">提交</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
},
methods: {
deleteItem(index) {
this.data.splice(index, 1)
},
submitData() {
// 提交数据给后台
}
}
}
</script>
```
其中,`data`数组中的每一项都有一个`name`和`age`属性,可以根据自己的需求修改。每一项数据都绑定到表单元素上,使用`v-model`指令。
删除按钮的点击事件触发`deleteItem`方法,根据索引从`data`数组中删除该项数据。
提交按钮的点击事件触发`submitData`方法,可以在该方法中将修改后的数据提交给后台更新。
阅读全文