vue3表单修改多条数据

在Vue 3中，可以通过表单来修改多条数据。下面是一个示例，展示如何使用表单同时修改多条数据：

首先，在Vue组件中定义一个数据对象，用来保存多条数据：

<template>
  <form @submit="handleSubmit">
    <div v-for="item in items" :key="item.id">
      <input v-model="item.name" type="text" />
      <input v-model="item.age" type="number" />
    </div>
    <button type="submit">保存</button>
  </form>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        // ...
      ],
    };
  },
  methods: {
    handleSubmit() {
      // 处理表单提交逻辑
      // 可以在这里将修改后的数据发送给后端进行保存
      console.log(this.items);
    },
  },
};
</script>

在上述代码中，我们通过`v-for`指令遍历`items`数组中的数据，并使用`v-model`指令绑定输入框的值。这样，当用户输入内容时，`items`中对应数据的值会自动更新。

然后，在表单的提交事件处理函数`handleSubmit`中，可以获取到修改后的数据。你可以在该函数中进行进一步的处理，例如将修改后的数据发送给后端进行保存。

请注意，上述代码中的示例是使用Vue 3的Composition API（`ref`函数）来定义数据对象。如果你使用的是Options API，可以将`items`定义为普通的数据属性。

这是一个简单的示例，你可以根据实际业务需求进行修改和扩展，例如添加校验、数据同步等逻辑。