vue表单数据通过id进行删除

假设你的表单数据是存储在一个数组中，每个数据对象都有一个唯一的id属性，那么可以通过以下步骤来实现通过id删除表单数据：

1. 给表单元素绑定一个删除事件，例如点击一个删除按钮。

2. 在事件处理函数中获取当前数据对象的id。

3. 使用 JavaScript 的数组方法（例如 Array.prototype.findIndex()）找到该数据对象在数组中的索引。

4. 使用 JavaScript 的数组方法（例如 Array.prototype.splice()）将该数据对象从数组中删除。

5. 更新表单的显示，例如重新渲染表格或列表。

以下是一个简单的示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <button @click="deleteItem(item.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    deleteItem(id) {
      const index = this.items.findIndex(item => item.id === id);
      if (index >= 0) {
        this.items.splice(index, 1);
      }
    }
  }
};
</script>

在上面的代码中，当用户点击 Delete 按钮时，会调用 deleteItem() 方法，并传入当前数据对象的id。该方法会找到该数据对象在 items 数组中的索引，并使用 splice() 方法将其删除。最后，表格会自动重新渲染，显示更新后的数据。