Vue Formulate基于Schema生成动态表单的重复键报错技术咨询

Vue Formulate 的 Schema 解析逻辑默认将表单项的name属性作为内部列表渲染的唯一键，当两个及以上表单项的配置完全重复、name值一致时，就会触发重复键检测报错。针对提出的两类解决思路，均可直接落地实现，具体参考如下：

以列表索引作为表单项唯一键的实现 #

该方式完全受Vue Formulate原生支持，无需额外依赖。
Vue Formulate 允许开发者通过Schema项的key字段自定义渲染时的唯一标识，配置该字段后会优先使用自定义值替代默认的name属性做键检测。要直接将列表索引作为唯一键，只需要在将Schema传入表单组件前，遍历数组为每一项绑定索引值即可：

// 原始存在重复配置的Schema
const rawSchema = [
  { type: 'text', name: 'common-input' },
  { type: 'text', name: 'common-input' }
]

// 遍历绑定索引为key
const schemaWithIndexKey = rawSchema.map((item, idx) => ({
  ...item,
  key: `index-key-${idx}`
}))

使用该方案的注意事项：

• 实现成本极低，仅适合静态、固定顺序的Schema场景
• 若Schema存在运行时动态增删、排序的需求，索引值会随顺序变动产生错位，导致表单组件状态错乱，不推荐在动态变更场景使用

Schema内嵌唯一ID的根源实现方案 #

该方案是适配所有场景的通用解决路径，可从根源上彻底规避重复键问题。
为每一个Schema节点绑定和内容、顺序无关的全局唯一ID作为自定义key，无论表单项配置是否完全重复，都不会触发键冲突。
具体实现可以分为两步：

1. 实现轻量唯一ID生成逻辑

   // 简单递增型唯一ID生成器，可按需替换为成熟的ID生成方案
   let idSeed = 0
   const genUniqueKey = () => `form-item-key-${idSeed++}`
   

2. 批量为Schema节点注入唯一ID
   针对存在嵌套结构（如分组、嵌套子表单）的Schema，无需手动为每一项写死ID，通过递归函数批量处理即可覆盖所有层级：

   function injectUniqueKey(schemaNodes) {
     return schemaNodes.map(node => {
       const processedNode = { ...node, key: genUniqueKey() }
       // 递归处理嵌套的子Schema节点
       if (Array.isArray(node.children)) {
         processedNode.children = injectUniqueKey(node.children)
       }
       return processedNode
     })
   }
   
   // 直接将原始Schema传入处理函数，生成最终可使用的配置
   const finalSchema = injectUniqueKey(rawSchema)
   

该方案的优势与注意事项：

• 生成的key和表单项内容、数组顺序完全解耦，哪怕后续动态增删、排序、调整表单项配置，都不会出现键重复或者组件状态错乱的问题
• 注入的key字段仅作为Vue Formulate内部渲染的唯一标识，不会随表单提交的业务数据一起返回，不影响正常的表单值收集逻辑

内容的提问来源于stack exchange，提问作者Josh Willems