vuetify-jsonschema-form icon indicating copy to clipboard operation
vuetify-jsonschema-form copied to clipboard

Selecting correct item from combo based on model value

Open avido opened this issue 3 years ago • 9 comments

Hi,

I have a combo with key/value items. However if the form is generated the 'value' is shown in the combox instead of the 'title'

Part of schema

"brand": {
                    "type": "string",
                    "title": "Brand",
                    "x-display": "autocomplete",
                    "x-itemTitle": "label",
                    "x-itemKey": "value",
                    "enum": [
                        {
                            "value": 1,
                            "label": "Brand 1
                        },
                        {
                            "value": 2,
                            "label": "Brand 2"
                        },
                        {
                            "value": 3,
                            "label": "Brand 3"
                        }
                    ],
                    "required": true,
}

Model:

export default {
    data() {
        return {
            model: {
                brand:1
            }
        }
    },

avido avatar Jul 07 '21 08:07 avido

Your schema declares a type string but the enum contains objects, this is not a valid json schema.

To handle displaying a label associated to the value but only storing the value you must use oneOf, cf https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/examples#select

albanm avatar Jul 07 '21 09:07 albanm

Tnxx for your quick reply.. However still running into some issues..

I've changed my schema to your specs, but i get the following error:

"TypeError: Cannot convert undefined or null to object"

schema:

"manufacturer": {
                    "type": "object",
                    "title": "Fabrikant",
                    "oneOf": [
                        {
                            "const": 1,
                            "title": "Item 1"
                        },
                        {
                            "const": 2,
                            "title": "Item 2"
                        },
                        {
                            "const": 3,
                            "title": "Item 3"
                        }
                    ]
}

avido avatar Jul 07 '21 10:07 avido

You sort of reversed the problem. Your oneOf has numbers in the const property, meaning that it should be inside a property with type number, here the property has type object.

albanm avatar Jul 07 '21 10:07 albanm

O ghe.. I was in the understanding that "type" was specifying the oneOf.. but if i understand correctly it's specifying the 'value' of the attribute so in my example above the "const" value ?

avido avatar Jul 07 '21 10:07 avido

Yes, that's it.

albanm avatar Jul 07 '21 10:07 albanm

So far the rendering works fine.. However.. if i have values in my 'model' the label isn't selected in the combobox but instead the 'value' is shown.

Schema:

"manufacturer": {
    "type": "string",
    "title": "Manufacturer",
    "oneOf": [
    {
        "const": 1,
        "title": "Item 1"
    },
    {
        "const": 2,
        "title": "Item 2"
    },
    {
        "const": 2,
        "title": "Item 2"
    }]
}

Model:

const model = {
   manufacturer: 1
}; 

avido avatar Jul 13 '21 12:07 avido

@albanm any ideas ?

avido avatar Jul 19 '21 07:07 avido

I don't understand, this example looks like it is working fine.

albanm avatar Jul 19 '21 08:07 albanm

hmm i see, strange.. will check my code again then :) Thanks for your feedback and example

avido avatar Jul 19 '21 15:07 avido