|
1 |
| -# vue-json-ui-editor |
| 1 | +# json-editor |
2 | 2 |
|
3 |
| -> Edit JSON in UI form with JSON Schema and Vue.js |
| 3 | +Edit JSON in UI form with JSON Schema and Vue.js `<json-editor>` component. |
4 | 4 |
|
5 |
| -## Build Setup |
| 5 | +## props |
6 | 6 |
|
7 |
| -``` bash |
8 |
| -# install dependencies |
9 |
| -npm install |
| 7 | +- `schema` ***Object*** (*required*) |
| 8 | +The JSON Schema object. Use the `v-if` directive to load asynchronous schema. |
10 | 9 |
|
11 |
| -# serve with hot reload at localhost:8080 |
12 |
| -npm run dev |
| 10 | +- `v-model` ***Object*** (*optional*) `default: [object Object]` |
| 11 | +Use this directive to create two-way data bindings with the component. It automatically picks the correct way to update the element based on the input type. |
13 | 12 |
|
14 |
| -# build for production with minification |
15 |
| -npm run build |
| 13 | +- `auto-complete` ***String*** (*optional*) |
| 14 | +This property indicates whether the value of the control can be automatically completed by the browser. Possible values are: `off` and `on`. |
16 | 15 |
|
17 |
| -# build for production and view the bundle analyzer report |
18 |
| -npm run build --report |
19 |
| -``` |
| 16 | +- `no-validate` ***Boolean*** (*optional*) |
| 17 | +This Boolean attribute indicates that the form is not to be validated when submitted. |
20 | 18 |
|
21 |
| -For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). |
| 19 | +- `input-wrapping-class` ***String*** (*optional*) |
| 20 | +Define the inputs wrapping class. Leave `undefined` to disable input wrapping. |
| 21 | + |
| 22 | +## data |
| 23 | + |
| 24 | +- `default` |
| 25 | + *initial value:* `[object Object]` |
| 26 | + |
| 27 | +- `fields` |
| 28 | + *initial value:* `[object Object]` |
| 29 | + |
| 30 | +- `error` |
| 31 | + *initial value:* `null` |
| 32 | + |
| 33 | +- `data` |
| 34 | + *initial value:* `[object Object]` |
| 35 | + |
| 36 | +## events |
| 37 | + |
| 38 | +- `input` Fired synchronously when the value of an element is changed. |
| 39 | + |
| 40 | +- `change` Fired when a change to the element's value is committed by the user. |
| 41 | + |
| 42 | +- `invalid` Fired when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form, or after the `checkValidity()` of the element or its owner form is called. |
| 43 | + |
| 44 | +- `submit` Fired when a form is submitted |
| 45 | + |
| 46 | +## methods |
| 47 | + |
| 48 | +- `input(name)` |
| 49 | +Get a form input reference |
| 50 | + |
| 51 | +- `form()` |
| 52 | +Get the form reference |
| 53 | + |
| 54 | +- `checkValidity()` |
| 55 | +Checks whether the form has any constraints and whether it satisfies them. If the form fails its constraints, the browser fires a cancelable `invalid` event at the element, and then returns false. |
| 56 | + |
| 57 | +- `reset()` |
| 58 | +Reset the value of all elements of the parent form. |
| 59 | + |
| 60 | +- `submit(event)` |
| 61 | +Send the content of the form to the server |
| 62 | + |
| 63 | +- `setErrorMessage(message)` |
| 64 | +Set a message error. |
| 65 | + |
| 66 | +- `clearErrorMessage()` |
| 67 | +clear the message error. |
0 commit comments