Onchange on enum field

My goal is to build a form generator. I cannot detect a value change on an “enum” type field. It works for other types of fields. Here is a piece of code:


<script lang="ts">

import { defineComponent, toRaw } from "vue";
import { JsonForms, type JsonFormsChangeEvent } from "@jsonforms/vue";
import { defaultStyles, mergeStyles, vuetifyRenderers } from "@jsonforms/vue-vuetify";

// const myStyles = mergeStyles(defaultStyles, { control: { label: "mylabel" } });

const renderers = [

const schema = {
  "type" : "object",
  "properties": {
    "formbuilder": {
      "type": "array",
      "title": "Ajouter un champ",
      "items": {
        "type": "object",
        "properties": {
          "name": {
            "type": "string"
          "field": {
            "type": "string",
            "enum": ['string', 'textarea', 'date', 'checkbox', 'select']
          "required": {
            "type": "boolean"

const uischema = {
  "type": "VerticalLayout",
  "elements": [
      "type": "Control",
      "scope": "#/properties/formbuilder",
      "options": {
        "showSortButtons" : true,
        "elementLabelProp": "name",
        "detail": {
          "type": "HorizontalLayout",
          "elements": [
              "type": "Control",
              "scope": "#/properties/name"
              "type": "Control",
              "scope": "#/properties/field"
              "type": "Control",
              "scope": "#/properties/required"

export default defineComponent({
  name: "App",
  components: {
  data() {
    return {
      // freeze renderers for performance gains
      renderers: Object.freeze(renderers),
      data: {},
  methods: {
    onChange(event: JsonFormsChangeEvent) {
      this.data = event.data;

Thank you in advance for the time you will take regarding my problem :slight_smile:

Hi @Terry,

Are you using the latest version of the vue-vuetify renderers, i.e. 3.2.0-preview-alpha.3? In it the issues should be fixed.

FYI: We plan to update, align and (pre) release the vue-vuetify renderers soonish.

Hi :slight_smile: , thank you for your response. The solution is correct, I will just point out that I had to use this command for it to work:
npm i --force @jsonforms/vue-vuetify@3.2.0-preview-alpha.3
Without the force option the command is rejected.
Here my dependencies if someone have the same problem :

  "dependencies": {
    "@jsonforms/core": "^3.2.0",
    "@jsonforms/vue": "^3.2.0",
    "@jsonforms/vue-vuetify": "^3.2.0-preview-alpha.3",
    "@vee-validate/yup": "^4.12.6",
    "axios": "^1.6.2",
    "jwt-decode": "^4.0.0",
    "oidc-client-ts": "^3.0.0-rc.0",
    "pinia": "^2.1.7",
    "vee-validate": "^4.12.6",
    "vue": "^3.3.10",
    "vue-cookies": "^1.8.3",
    "vue-router": "^4.2.5",
    "vuetify": "^3.5.12"

Thank you for your help, and I appreciate the work you do, good job!

Hi @Terry,

It’s very important to use the same version of all JSON Forms dependencies, so in your case 3.2.0-alpha.3 for @jsonforms/core and @jsonforms/vue and 3.2.0-preview-alpha.3 for @jsonforms/vue-vuetify.

We are always building and releasing them together. You might face regressions when mixing the versions as they might be partially incompatible.

ok it’s corrected, thanks again :slight_smile: !