Onchange on enum field

General
1

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:

<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 :slight_smile:

2

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.

3

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!

4

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.

5

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