Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yourtion/vue-json-ui-editor
Edit JSON in UI form with JSON Schema and Vue.js
https://github.com/yourtion/vue-json-ui-editor
json json-editor json-schema json-ui-schema schema vue vue-editor vue-json-editor vue-json-schema
Last synced: 27 days ago
JSON representation
Edit JSON in UI form with JSON Schema and Vue.js
- Host: GitHub
- URL: https://github.com/yourtion/vue-json-ui-editor
- Owner: yourtion
- License: mit
- Created: 2017-11-21T16:04:42.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-04-30T06:16:17.000Z (over 3 years ago)
- Last Synced: 2024-10-01T04:43:32.972Z (about 1 month ago)
- Topics: json, json-editor, json-schema, json-ui-schema, schema, vue, vue-editor, vue-json-editor, vue-json-schema
- Language: JavaScript
- Homepage: http://jsonui.js.org/
- Size: 1.75 MB
- Stars: 507
- Watchers: 9
- Forks: 97
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![David deps][david-image]][david-url]
[![npm download][download-image]][download-url]
[![npm license][license-image]][download-url]
[npm-image]: https://img.shields.io/npm/v/vue-json-ui-editor.svg?style=flat-square
[npm-url]: https://npmjs.org/package/vue-json-ui-editor
[travis-image]: https://img.shields.io/travis/yourtion/vue-json-ui-editor.svg?style=flat-square
[travis-url]: https://travis-ci.org/yourtion/vue-json-ui-editor
[coveralls-image]: https://img.shields.io/coveralls/yourtion/vue-json-ui-editor.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/yourtion/vue-json-ui-editor?branch=master
[david-image]: https://img.shields.io/david/yourtion/vue-json-ui-editor.svg?style=flat-square
[david-url]: https://david-dm.org/yourtion/vue-json-ui-editor
[download-image]: https://img.shields.io/npm/dm/vue-json-ui-editor.svg?style=flat-square
[download-url]: https://npmjs.org/package/vue-json-ui-editor
[license-image]: https://img.shields.io/npm/l/vue-json-ui-editor.svg
# json-editor
[](https://greenkeeper.io/)
[](https://deepscan.io/dashboard#view=project&tid=2046&pid=2774&bid=19927)
Edit JSON in UI form with JSON Schema and Vue.js `` component.
## Install
```bash
npm install vue-json-ui-editor --save
```
## Use
```Vue
submit
Reset
const SCHEMA = {
type: 'object',
title: 'vue-json-editor demo',
properties: {
name: {
type: 'string',
},
email: {
type: 'string',
},
},
};
// import vue-json-ui-editor
import JsonEditor from 'vue-json-ui-editor';
export default {
components: { JsonEditor },
data: () => ({
// init json schma file ( require('@/schema/newsletter') )
schema: SCHEMA,
// data
model: {
name: 'Yourtion',
},
}),
methods: {
submit(_e) {
alert(JSON.stringify(this.model));
},
reset() {
this.$refs.JsonEditor.reset();
},
},
};
```
More info on: [Example-Subscription](example/components/Subscription.vue)
Schema: [newsletter.json](example/schema/newsletter.json)
## props
- `schema` ***Object*** (*required*)
The JSON Schema object. Use the `v-if` directive to load asynchronous schema.
- `v-model` ***Object*** (*optional*) `default: [object Object]`
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.
- `auto-complete` ***String*** (*optional*)
This property indicates whether the value of the control can be automatically completed by the browser. Possible values are: `off` and `on`.
- `no-validate` ***Boolean*** (*optional*)
This Boolean attribute indicates that the form is not to be validated when submitted.
- `input-wrapping-class` ***String*** (*optional*)
Define the inputs wrapping class. Leave `undefined` to disable input wrapping.
## data
- `default`
*initial value:* `[object Object]`
- `fields`
*initial value:* `[object Object]`
- `error`
*initial value:* `null`
- `data`
*initial value:* `[object Object]`
## events
- `input` Fired synchronously when the value of an element is changed.
- `change` Fired when a change to the element's value is committed by the user.
- `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.
- `submit` Fired when a form is submitted
## methods
- `input(name)`
Get a form input reference
- `form()`
Get the form reference
- `checkValidity()`
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.
- `reset()`
Reset the value of all elements of the parent form.
- `submit(event)`
Send the content of the form to the server
- `setErrorMessage(message)`
Set a message error.
- `clearErrorMessage()`
clear the message error.