1

I am trying to generate a form which can have multiple recursive fields. I have used https://codepen.io/crickford/pen/ZmJqwd this demo (I am not using any custom component). Whenever i am using "$ref" it ignores it. I am using vue-json-schema-form. Here is the link of github https://github.com/crickford/vue-json-schema-form. Even if i use "$ref":"#" it's not working.

My Json-schema is valid. Even if i replace the following schema in codepen i don't get expected result, where as it is giving me proper output by editing schema property of the source in this link http://www.alpacajs.org/docs/api/recursive-references.html

I don't know where am I mistaking !! At least in codepen attached schema code should work. Kindly guide me or share working demo fiddle with me. Thanks in advance.

Here is my schema:

   {
    "type": "object",
    "title": "",
    "properties": {
        "Namespace": {
            "type": "string",
            "title": "Namespace ",
            "attrs": {
                "placeholder": "Namespace",
                "title": "Please enter Namespace"
            }
        },
        "Name": {
            "type": "string",
            "title": "Display Name : ",
            "attrs": {
                "placeholder": "Display Name",
                "title": "Please enter Display name"
            }
        },
        "SubSteps": {
            "type": "array",
            "title": "SubSteps",
            "items": {
                "type": "object",
                "title": "Sub step",
                "$ref": "#/definitions/SubSteps"
            }
        }
    },
    "definitions": {
        "SubSteps": {
            "type": "object",
            "title": "SubStep item",
            "properties": {
                "Namespace": {
                    "type": "string",
                    "title": "Namespace ",
                    "attrs": {
                        "placeholder": "Namespace",
                        "title": "Please enter Namespace"
                    }
                },
                "Name": {
                    "type": "string",
                    "title": "Display Name : ",
                    "attrs": {
                        "placeholder": "Display Name",
                        "title": "Please enter Display name"
                    }
                },
                "SubSteps": {
                    "type": "array",
                    "title": "SubSteps",
                    "items": {
                        "type": "object",
                        "title": "Sub step",
                        "$ref": "#/definitions/SubSteps"
                    }
                }
            }
        }
    },
    "required": [
        "Name"
    ]
}
  • Form generation with JSON Schema is not standardised. Each library will "do their own thing"(tm). For vue-json-schema-form, there's no mention of `$ref` in the codebase, and therefore I can only assume it's not supported. – Relequestual Mar 04 '20 at 12:28
  • Given you've left an issue on the associated github repo, you might want to delete your question here. Your schema is correct as far as JSON Schema validation goes. – Relequestual Mar 04 '20 at 12:29
  • Are there other ways to use json-schema with refs OR json to generate dynamic form in vue js? – Riddhi Adhvaryu Mar 05 '20 at 05:30
  • Sure, you can write your own code to do it. Or you could use an alternate library which doesn't have the vue interfaces. It really depends what you need. – Relequestual Mar 05 '20 at 08:22

1 Answers1

0

It doesn't look like the library in question supports the use of $ref. Therefore you would have to submit an issue and / or pull request to add the functionality you want.

Relequestual
  • 11,631
  • 6
  • 47
  • 83