JSONForms Vue 自定义数组渲染器开发指南

在使用 JSONForms 框架开发 Vue 应用时，自定义数组渲染器是一个常见需求。本文将深入解析如何正确实现 Vue 环境下的数组操作功能，特别是针对数组项的增删改查操作。

核心问题分析

开发者在自定义数组渲染器时，经常会遇到"array.push is not a function"这类错误。这通常是由于错误地访问了响应式数据的路径(path)属性导致的。在 Vue 的组合式 API 中，我们需要特别注意响应式数据的访问方式。

正确实现方式

1. 基础设置

首先需要正确设置组件属性：

const props = defineProps({ ...rendererProps<ControlElement>() });
const { control, addItem } = useJsonFormsArrayControl(props);

2. 数组操作函数

关键点在于如何正确使用数组操作函数。以下是添加数组项的正确实现：

const addNewItem = () => {
  // 正确方式：通过control.value访问路径
  addItem(control.value.path, '新项目')();
};

3. 注意事项

• 避免直接使用props.path，而应该使用control.value.path
• 所有数组操作函数(addItem/removeItems/moveDown/moveUp)都应遵循相同原则
• 操作函数是工厂函数，需要额外调用一次()

实现原理

JSONForms 的 Vue 实现基于组合式API，control是一个响应式引用(ref)。当我们需要访问其属性时，必须通过.value来获取。这与直接访问props不同，props是解构后非响应式的普通对象。

最佳实践建议

1. 始终通过control.value访问数组控制属性
2. 在模板中使用解构后的响应式数据
3. 对于复杂操作，考虑封装自定义hook
4. 调试时可通过console.log检查control.value的结构

常见错误排查

如果遇到操作无效的情况，可以按以下步骤检查：

1. 确认是否正确使用了.value
2. 检查路径(path)是否正确
3. 验证数据是否已正确初始化
4. 确保没有直接修改props

通过遵循这些原则，可以避免大多数数组操作相关的问题，实现稳定可靠的数组渲染功能。