如何通过循环创建多个表单?

本文将展示如何使用 form-create 在循环创建多个表单，并实现表单的动态添加、重置和提交功能。我们将使用 Mock 数据模拟从接口获取的表单数据，并提供详细的代码示例和解释。

代码说明

• 按钮区域: 包含三个按钮用于获取表单数据、添加新表单和重置表单。按钮的 @click 事件绑定到相应的方法。

• 循环渲染表单: 使用 v-for 指令遍历 forms 数组，渲染每个表单。每个表单通过 form-create 组件生成，key 使用唯一的 form.id。

• 表单创建: createForm 函数生成具有默认数据的表单配置。idCounter 用于确保每个表单具有唯一的 id。

• 获取表单数据: fetchFormData 方法使用 mockData 模拟从接口获取数据，初始化表单列表。

• 添加表单: addForm 方法向表单列表中添加一个新的空表单。

• 重置表单: resetForms 方法重新从 Mock 数据获取数据，重置表单列表。

• 提交表单: handleSubmit 方法验证所有表单数据，并在验证成功后输出表单数据。

注意事项

• Mock 数据: 在实际开发中，应将 mockData 替换为真实的 API 请求。
• 唯一标识: 使用 idCounter 确保每个表单具有唯一的 id，避免使用索引作为 key。
• 表单验证: 在 handleSubmit 方法中，使用 Promise.all 确保所有表单都通过验证。