vue3实现删除表单里的数据
时间: 2023-08-12 14:39:41 浏览: 73
要实现删除表单里的数据,你需要使用Vue3的数据绑定和事件监听机制。假设你的表单里有一个数组字段,比如说叫做formList,那么你可以在模板里使用v-for指令遍历这个数组,同时给每个元素绑定一个删除按钮的点击事件,如下所示:
```
<template>
<div>
<div v-for="item in formList" :key="item.id">
<span>{{ item.name }}</span>
<button @click="deleteItem(item.id)">删除</button>
</div>
</div>
</template>
```
在这个模板里,我们遍历了formList数组,并且为每个元素绑定了一个点击事件deleteItem,这个事件会接收一个参数id,表示要删除的元素的唯一标识。接下来,我们需要在Vue实例里定义这个事件处理函数:
```
<script>
import { reactive } from 'vue'
export default {
setup() {
const state = reactive({
formList: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
})
const deleteItem = (id) => {
state.formList = state.formList.filter(item => item.id !== id)
}
return {
state,
deleteItem
}
}
}
</script>
```
在这个例子里,我们使用Vue3的响应式函数reactive创建了一个状态对象state,并且在这个对象里定义了formList数组。接着,我们定义了一个deleteItem函数,它接收一个参数id,表示要删除的元素的唯一标识。在这个函数里,我们使用数组的filter方法过滤掉id对应的元素,然后重新赋值给state.formList,这样就实现了删除功能。
注意,这个例子里我们使用了Vue3的Composition API,如果你还不熟悉这个API,可以先学习一下。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)