Custom Renderer multiple inputs -> same data

General
1

I need to create a custom renderer for phone numbers with two inputs, but then when saving the data, they need to be joined together in a string. Is there a specific way to do this?
So far, what I have is:

<template>
    <div>
        <v-combobox v-model="countryCode"
                    :items="COUNTRY_CODES"
                    item-title="value"
                    placeholder="Country Code"
                    @change="input" />
        <v-text-field v-model="phoneNumber" placeholder="Phone Number" @input="input" />
    </div>
</template>

<script lang="ts">
import { ControlElement, JsonFormsRendererRegistryEntry, rankWith, scopeEndsWith } from '@jsonforms/core'
import { RendererProps, rendererProps, useJsonFormsControl } from '@jsonforms/vue'
import { defineComponent } from 'vue'
import { useVanillaControl } from '@jsonforms/vue-vanilla/src/util'
import { COUNTRY_CODES } from './constants'

const phoneNumberRenderer = defineComponent({
    name: 'phone-number-renderer',
    props: {
        ...rendererProps<ControlElement>(),
    },
    emits: ['input'],
    setup (props: RendererProps<ControlElement>) {
        return {
            COUNTRY_CODES,
            ...useVanillaControl(useJsonFormsControl(props), target => target.value || undefined),
        }
    },
    data () {
        return {
            countryCode: '' as string,
            phoneNumber: '' as string,
        }
    },
    methods: {
        input () {
            if (!this.countryCode || !this.phoneNumber) {
                return
            }
            this.$emit('input', `${this.countryCode}${this.phoneNumber}`)
        },
    },
})

export default phoneNumberRenderer

export const entry: JsonFormsRendererRegistryEntry = {
    renderer: phoneNumberRenderer,
    tester: rankWith(3, scopeEndsWith('phone')),
}
</script>

The emit is not working, so probably I need to use something specific, like the onChange, but not sure how to make it work as it requires an Event as the parameter.

Thanks in advance!

2

I’ve found an answer. I noticed via the DevTools that another method was available, called handleChange which allows to define a path and a value, so I’ll use that.

However, if there is a better way to do this, please let me know.

3

Hi @adamsilva01,

Yes, handleChange is the intended method to use. The onChange is just a convenience wrapper around handleChange which is sufficient for most use cases.