当前位置：首页 > VUE

vue实现表单添加删除

2026-01-23 14:42:47VUE

Vue 表单添加与删除实现

在 Vue 中实现表单的添加和删除功能，可以通过数据绑定和数组操作方法来实现。以下是具体实现方式：

数据准备

在 Vue 的 data 中定义一个数组来存储表单数据，并初始化一个空对象用于新增表单项：

vue实现表单添加删除

data() {
  return {
    formItems: [],
    newItem: {
      name: '',
      age: ''
    }
  }
}

添加表单项

通过 push 方法将新表单项添加到数组中，并重置 newItem：

methods: {
  addItem() {
    this.formItems.push({...this.newItem})
    this.newItem = { name: '', age: '' }
  }
}

删除表单项

使用 splice 方法根据索引删除指定表单项：

vue实现表单添加删除

methods: {
  deleteItem(index) {
    this.formItems.splice(index, 1)
  }
}

模板部分

<template>
  <div>
    <div v-for="(item, index) in formItems" :key="index">
      <input v-model="item.name" placeholder="姓名">
      <input v-model="item.age" placeholder="年龄">
      <button @click="deleteItem(index)">删除</button>
    </div>

    <div>
      <input v-model="newItem.name" placeholder="姓名">
      <input v-model="newItem.age" placeholder="年龄">
      <button @click="addItem">添加</button>
    </div>
  </div>
</template>

动态表单实现

对于更复杂的动态表单，可以使用组件化方式：

子组件

Vue.component('form-item', {
  props: ['item'],
  template: `
    <div>
      <input v-model="item.name">
      <input v-model="item.age">
      <button @click="$emit('delete')">删除</button>
    </div>
  `
})

父组件

new Vue({
  el: '#app',
  data: {
    items: []
  },
  methods: {
    addItem() {
      this.items.push({ name: '', age: '' })
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
})

父组件模板

<div id="app">
  <form-item
    v-for="(item, index) in items"
    :key="index"
    :item="item"
    @delete="removeItem(index)"
  ></form-item>
  <button @click="addItem">添加表单项</button>
</div>

表单验证

添加表单验证可以提升用户体验：

methods: {
  addItem() {
    if (!this.newItem.name || !this.newItem.age) {
      alert('请填写完整信息')
      return
    }
    this.formItems.push({...this.newItem})
    this.newItem = { name: '', age: '' }
  }
}