To create a custom control renderer, use the rendererProps factory to declare required props and a binding like useJsonFormsControl in the setup function. The binding provides a control object containing attributes like data, description, errors, and enabled, as well as a handleChange(path, value) method to update data.
Example implementation:
import { ControlElement } from '@jsonforms/core';
import { defineComponent } from 'vue';
import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
const controlRenderer = defineComponent({
name: 'control-renderer',
props: {
...rendererProps<ControlElement>(),
},
setup(props) {
return useJsonFormsControl(props);
},
methods: {
onChange(event: Event) {
this.handleChange(
this.control.path,
(event.target as HTMLInputElement).value
);
},
},
});
export default controlRenderer;
