Skip to content

Commit 3f091f8

Browse files
committed
📝 update README add screenshot and sample
1 parent 9ba3c1d commit 3f091f8

File tree

2 files changed

+56
-0
lines changed

2 files changed

+56
-0
lines changed

README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,62 @@
22

33
Edit JSON in UI form with JSON Schema and Vue.js `<json-editor>` component.
44

5+
![ScreenShot](screenshot.jpg)
6+
7+
## Install
8+
9+
```bash
10+
npm install vue-json-ui-editor --save
11+
```
12+
13+
## Use
14+
15+
```Vue
16+
<template>
17+
<json-editor ref="JsonEditor" :schema="schema" v-model="model">
18+
<button @click="submit">submit</button>
19+
<button @click="reset">Reset</button>
20+
</json-editor>
21+
</template>
22+
23+
<script>
24+
const SCHEMA = {
25+
type: 'object',
26+
title: 'vue-json-editor demo',
27+
properties: {
28+
name: {
29+
type: 'string',
30+
},
31+
email: {
32+
type: 'string',
33+
},
34+
},
35+
};
36+
// import vue-json-ui-editor
37+
import JsonEditor from '../../src/JsonEditor.vue';
38+
export default {
39+
components: { JsonEditor },
40+
data: () => ({
41+
// init json schma file
42+
schema: SCHEMA,
43+
// data
44+
model: {
45+
name: 'Yourtion',
46+
},
47+
}),
48+
49+
methods: {
50+
submit(_e) {
51+
alert(JSON.stringify(this.model));
52+
},
53+
reset() {
54+
this.$refs.JsonEditor.reset();
55+
},
56+
},
57+
};
58+
</script>
59+
```
60+
561
## props
662

763
- `schema` ***Object*** (*required*)

screenshot.jpg

68 KB
Loading

0 commit comments

Comments
 (0)