Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2b87f85

Browse files
author
Lionel Bijaoui
committed
Creation of dev entry to test multiple instances of vue-form-generator
1 parent 55bde39 commit 2b87f85

File tree

3 files changed

+186
-0
lines changed

3 files changed

+186
-0
lines changed

‎projects/multi/app.vue

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<template>
2+
<div class="container">
3+
<h1>Multi</h1>
4+
<div class="row">
5+
<div class="col-sm-12">
6+
<vue-form-generator :schema="schema" :model="model" :options="formOptions" ref="form1" :is-new-model="isNewModel" @model-updated="modelUpdated1" @validated="onValidated1"></vue-form-generator>
7+
</div>
8+
</div>
9+
<div class="row">
10+
<div class="col-sm-12">
11+
<vue-form-generator :schema="schema2" :model="model" :options="formOptions" ref="form2" :is-new-model="isNewModel" @model-updated="modelUpdated2" @validated="onValidated2"></vue-form-generator>
12+
</div>
13+
</div>
14+
<div class="row">
15+
<div class="col-sm-12">
16+
<pre v-if="model" v-html="prettyModel"></pre>
17+
</div>
18+
</div>
19+
</div>
20+
</template>
21+
22+
<script>
23+
import mixinUtils from "../../mixins/utils.js";
24+
25+
export default {
26+
mixins: [mixinUtils],
27+
28+
data() {
29+
return {
30+
isNewModel: false,
31+
32+
selected: [],
33+
34+
model: {
35+
first_name: "David",
36+
last_name: "Higgins",
37+
status: true
38+
},
39+
40+
schema: {
41+
fields: [
42+
{
43+
type: "input",
44+
model: "first_name",
45+
label: "First Name",
46+
fieldOptions: {
47+
inputType: "text"
48+
},
49+
required: true,
50+
validator: ["string"],
51+
attributes: {
52+
input: {
53+
"data-toggle": "tooltip"
54+
},
55+
wrapper: {
56+
"data-target": "input"
57+
}
58+
}
59+
},
60+
{
61+
type: "input",
62+
label: "Color",
63+
model: "color",
64+
fieldOptions: {
65+
inputType: "color"
66+
},
67+
attributes: {
68+
input: {
69+
"data-target": "tooltip"
70+
}
71+
}
72+
}
73+
]
74+
},
75+
76+
schema2: {
77+
fields: [
78+
{
79+
type: "checkbox",
80+
label: "Active",
81+
model: "status",
82+
required: true,
83+
validator: ["required"],
84+
attributes: {
85+
input: {
86+
"data-toggle": "tooltip"
87+
}
88+
}
89+
},
90+
{
91+
type: "input",
92+
model: "last_name",
93+
label: "Last Name",
94+
fieldOptions: {
95+
inputType: "text"
96+
},
97+
required: true,
98+
validator: ["string"]
99+
},
100+
{
101+
type: "submit",
102+
attributes: {
103+
input: {
104+
"data-target": "toggle"
105+
}
106+
},
107+
fieldOptions: {
108+
buttonText: "Change Previous Type",
109+
onSubmit: () => {
110+
// this.schema.fields[1].type = "input";
111+
if (this.schema.fields[1].fieldOptions.inputType === "color") {
112+
this.schema.fields[1].fieldOptions.inputType = "text";
113+
} else {
114+
this.schema.fields[1].fieldOptions.inputType = "color";
115+
}
116+
}
117+
}
118+
}
119+
]
120+
},
121+
122+
formOptions: {
123+
validateAfterLoad: true,
124+
validateAfterChanged: true
125+
}
126+
};
127+
},
128+
129+
methods: {
130+
onValidated1(res, errors) {
131+
console.log("VFG 1 validated:", res, errors);
132+
},
133+
onValidated2(res, errors) {
134+
console.log("VFG 2 validated:", res, errors);
135+
},
136+
137+
modelUpdated1(newVal, schema) {
138+
console.log("main model has updated (from 1)", newVal, schema);
139+
},
140+
modelUpdated2(newVal, schema) {
141+
console.log("main model has updated (from 2)", newVal, schema);
142+
}
143+
},
144+
145+
mounted() {
146+
this.$nextTick(function() {
147+
window.app = this;
148+
});
149+
}
150+
};
151+
</script>
152+
153+
<style lang="scss">
154+
@import "../../style.scss";
155+
</style>

‎projects/multi/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>vue-form-generator development</title>
7+
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8+
9+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
10+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
11+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
12+
<!-- jQuery dependent -->
13+
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
14+
</head>
15+
16+
<body>
17+
<div class="container-fluid"></div>
18+
<div id="app"></div>
19+
<script src="/multi.js"></script>
20+
</body>
21+
22+
</html>

‎projects/multi/main.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Vue from "vue";
2+
import VueFormGenerator from "../../../src";
3+
Vue.use(VueFormGenerator);
4+
5+
import App from "./app.vue";
6+
7+
new Vue({
8+
...App
9+
}).$mount("#app");

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /