File tree Expand file tree Collapse file tree 2 files changed +56
-0
lines changed Expand file tree Collapse file tree 2 files changed +56
-0
lines changed Original file line number Diff line number Diff line change 2
2
3
3
Edit JSON in UI form with JSON Schema and Vue.js ` <json-editor> ` component.
4
4
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
+
5
61
## props
6
62
7
63
- ` schema ` *** Object*** (* required* )
You can’t perform that action at this time.
0 commit comments