HandleChange in Custom Array Renderer (Vue)

General
1

Hi all. I’ve integrated JsonForms in a Vue 3 app.
I created a custom renderer for arrays. in this renderer I include an autocomplete listing different objects and I’d like to populate fields of an array item based on autocomplete selection.

Unfortunately, seems that the useJsonFormsArrayControl() method I’m using doesn’t expose the handleChange method, so I’m at a loss on how to change form status.

Worth noting I’m using the Composition API style of component definition for styling rules reasons…

<script setup lang="ts">

import { DispatchRenderer, useJsonFormsArrayControl, type RendererProps } from '@jsonforms/vue';
import { type ControlProps } from '@jsonforms/vue';


const props = defineProps<RendererProps<ControlProps>>();
const  ctrl = useJsonFormsArrayControl(props);
2

Hi @FOppici,

You can always inject the raw JSON Forms building blocks and thereby recreate handleChange for your use case, e.g.

You can inject the form-wide dispatch:

const dispatch = inject<Dispatch>(‘dispatch’);

Dispatch works on actions, so you can import Actions from @jsonforms/core , create the UPDATE action yourself and dispatch it.

Alternatively you can reuse one of the core helpers, e.g.

const { handleChange } = mapDispatchToControlProps(dispatch);
1 Like