vue-form-json-schema
Search…
Getting started
Option 1
Import everything and use globally
1
// App.js
2
import VueFormJsonSchema from 'vue-form-json-schema';
3
Vue.component('vue-form-json-schema', VueFormJsonSchema);
Copied!
1
<script>
2
// MyCustomComponent.js
3
export default {
4
data() {
5
return {
6
model: {},
7
schema: {
8
type: 'object',
9
properties: {
10
firstName: {
11
type: 'string'
12
}
13
}
14
},
15
uiSchema: [{
16
component: 'input',
17
model: 'firstName',
18
fieldOptions: {
19
class: ['form-control'],
20
on: ['input'],
21
attrs: {
22
placeholder: 'Please enter your first name'
23
}
24
}
25
}]
26
}
27
},
28
}
29
</script>
30
31
<template>
32
<vue-form-json-schema
33
v-model="model"
34
:schema="schema"
35
:ui-schema="uiSchema"
36
>
37
</vue-form-json-schema>
38
</template>
Copied!
Option 2
Import and use locally
1
<script>
2
// MyCustomComponent.js
3
import VueFormJsonSchema from 'vue-form-json-schema';
4
5
export default {
6
components: {
7
VueFormJsonSchema,
8
},
9
data() {
10
return {
11
model: {},
12
schema: {
13
type: 'object',
14
properties: {
15
firstName: {
16
type: 'string'
17
}
18
}
19
},
20
uiSchema: [{
21
component: 'input',
22
model: 'firstName',
23
fieldOptions: {
24
class: ['form-control'],
25
on: ['input'],
26
attrs: {
27
placeholder: 'Please enter your first name'
28
}
29
}
30
}]
31
}
32
},
33
}
34
35
</script>
36
<template>
37
<vue-form-json-schema
38
v-model="model"
39
:schema="schema"
40
:ui-schema="uiSchema"
41
>
42
</vue-form-json-schema>
43
</template>
Copied!
Last modified 9mo ago