# Onchange on enum field

**URL:** <https://jsonforms.discourse.group/t/onchange-on-enum-field/2088>\
**Category:** General\
**Created:** [April 19, 2024, 9:39am UTC](https://jsonforms.discourse.group/t/onchange-on-enum-field/2088 "2024-04-19T09:39:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Terry](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Terry](https://jsonforms.discourse.group/u/Terry)\
**Post date:** [April 19, 2024, 9:39am UTC](https://jsonforms.discourse.group/t/onchange-on-enum-field/2088/1 "2024-04-19T09:39:25Z")

</div>

Hi,  
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:

```auto
<template>
    <json-forms
      :data="data"
      :renderers="renderers"
      :schema="schema"
      :uischema="uischema"
      @change="onChange"
    />
</template>

<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 = [
  ...vuetifyRenderers,
];

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: {
    JsonForms,
  },
  data() {
    return {
      // freeze renderers for performance gains
      renderers: Object.freeze(renderers),
      data: {},
      schema,
      uischema,
    };
  },
  methods: {
    onChange(event: JsonFormsChangeEvent) {
      this.data = event.data;
      console.log(toRaw(this.data));
      
    },
  },
});
</script>

```

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

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [April 28, 2024, 9:20pm UTC](https://jsonforms.discourse.group/t/onchange-on-enum-field/2088/2 "2024-04-28T21:20:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Terry](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Terry](https://jsonforms.discourse.group/u/Terry)\
**Post date:** [April 29, 2024, 9:03am UTC](https://jsonforms.discourse.group/t/onchange-on-enum-field/2088/3 "2024-04-29T09:03:42Z")

</div>

> [@sdirix](#):
>
> 3.2.0-preview-alpha.3

Hi 🙂 , 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 :

```auto
  "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!

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [April 29, 2024, 9:19am UTC](https://jsonforms.discourse.group/t/onchange-on-enum-field/2088/4 "2024-04-29T09:19:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Terry](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Terry](https://jsonforms.discourse.group/u/Terry)\
**Post date:** [April 29, 2024, 9:28am UTC](https://jsonforms.discourse.group/t/onchange-on-enum-field/2088/5 "2024-04-29T09:28:08Z")

</div>

ok it’s corrected, thanks again 🙂 !