Vue (non-typescript) custom renderer binding control

General
1

I’ve managed to add this custom render in the jsonForm renderer, however I’m a bit lost how to bind the custom renderer. Not sure what to pass as props in the custom-renderer hence it’s blank. In the vue-vanilla it’s something like ...rendererProps<ControlElement>() I’m guessing it’ll be the same?

Can someone point me to the right direction how to do the binding?

<json-form :renderers="renderers" :schema="schema" :uischema="uischema" />
const renderers = ref(Object.freeze([
  ...vanillaRenderer,
  {
    tester: rankWith(1, optionIs('custom', true) ),
    renderer: CustomInputRenderer
  }
]))

CustomInputRenderer.vue

<template>
  <div>
    <custom-input @update="onChange"/>
  </div>
</template>

<script>
import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'
import { ControlElement } from '@jsonforms/core'
import { defineComponent } from "vue";

export default defineComponent({
  name: "JsonbRenderer",
  props: {
  },
  setup(props) {
    return useJsonFormsControl(props)
  },
  methods: {
    onChange(event) {
      console.log('Event: ', event)
    }
  }
});
</script>
2

Hi @devkram,

All renderers receive the same props as they are invoked by the dispatcher.

The rendererProps are exported as a helper from @jsonforms/vue so you can just reuse them. They are the same for all renderers, as long as you don’t customize the dispatching in your renderer set.