vue-form-generator/dev/grouping/app.vue at master · WebProgrammingTask/vue-form-generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<template lang="html">
	<form>
		<vue-form-generator :schema="schema" :model="model" :options="formOptions" tag="section"></vue-form-generator>
		<pre>{{ model }}</pre>
	</form>
</template>

<script>
import Vue from "vue";

export default {
	data () {
		return {
			model: {
				name: 'Brian Blessed',
				email: "brian@hawkman.mongo",
				others: {
					more: "More",
					things: "Things"
				},
				single: 'blah'
			},

			schema: {
			    groups:[{
                    legend: "Contact Details",
                    fields: [
                        {
                            type: "input",
                            inputType: "text",
                            label: "Name",
                            model: "name"
                        },
                        {
                            type: "input",
                            inputType: "email",
                            label: "Email",
                            model: "email"
                        }
                    ]
				},{
                    legend: "Other Details",
                    fields: [
                        {
                            type: "input",
                            inputType: "text",
                            label: "More",
                            model: "others.more"
                        },
                        {
                            type: "input",
                            inputType: "text",
                            label: "Things",
                            model: "others.things"
                        }
                    ]
                }],
				fields: [
					{
						type: "input",
						inputType: "text",
						label: "Single field (without group)",
						model: "single"
					}
				]
			},

			formOptions: {
				fieldIdPrefix: 'frm1-'
			}
		}
	},

	created() {
		window.app = this;
	}
}
</script>