parent
8721b1a16f
commit
5b037a05e2
@ -1,7 +1,7 @@
|
||||
{
|
||||
"/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=6c45b94df33523eac4ae",
|
||||
"/js/vue/Home/app.js": "/js/vue/Home/app.js?id=70fadcb63bc6b91314e4",
|
||||
"/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=5707b0c70e7e00d7f7aa",
|
||||
"/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=d8b99f78c445a5dcfabd",
|
||||
"/js/vue/User/app.js": "/js/vue/User/app.js?id=e0438d523387e91845cb"
|
||||
"/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=7bcc6b07d73a7435f929",
|
||||
"/js/vue/Home/app.js": "/js/vue/Home/app.js?id=2235a5a60b590f61e506",
|
||||
"/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=15ec1fe3113b14cf8538",
|
||||
"/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=dd8734e05a3ffd1bd1e1",
|
||||
"/js/vue/User/app.js": "/js/vue/User/app.js?id=70815b03dc8d415b66b9"
|
||||
}
|
||||
|
@ -1,34 +1,159 @@
|
||||
<template>
|
||||
<div>
|
||||
<element-factory v-for="(element, key) in elements" :element="element" :key="key"></element-factory>
|
||||
<element-factory
|
||||
v-for="(element, key) in elements"
|
||||
:element="element"
|
||||
:values="values"
|
||||
:key="element.id"
|
||||
></element-factory>
|
||||
<button @click="register">click me</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Factory from './FactoryPattern'
|
||||
import Factory from "./FactoryPattern";
|
||||
export default {
|
||||
components:{
|
||||
'element-factory' : Factory
|
||||
components: {
|
||||
"element-factory": Factory
|
||||
},
|
||||
data: () => ({
|
||||
elements:[
|
||||
{type:"wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red" },
|
||||
{type: "wm-form", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red", children: [
|
||||
{type:"wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red" },
|
||||
{type:"wm-form", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red", children: [
|
||||
{type: "wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red"},
|
||||
{type: "wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red"},
|
||||
]},
|
||||
{type:"wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red" },
|
||||
]},
|
||||
{type:"wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red"},
|
||||
{type:"wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red" },
|
||||
elements: [
|
||||
{
|
||||
id: 1,
|
||||
type: "wm-text_input",
|
||||
width: "pa-2",
|
||||
label: "Hi",
|
||||
placeholder: "placeholder",
|
||||
hint: "Hello",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: "wm-form",
|
||||
width: "pa-2",
|
||||
label: "salam",
|
||||
placeholder: "placeholder",
|
||||
hint: "hint",
|
||||
color: "red",
|
||||
children: [
|
||||
{
|
||||
id: 3,
|
||||
type: "wm-number_input",
|
||||
width: "pa-2",
|
||||
label: "salam",
|
||||
placeholder: "placeholder",
|
||||
hint: "hint",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: "wm-form",
|
||||
width: "pa-2",
|
||||
label: "Form",
|
||||
placeholder: "placeholder",
|
||||
hint: "hint",
|
||||
color: "red",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
type: "wm-switch",
|
||||
width: "pa-2",
|
||||
label: "switch",
|
||||
placeholder: "placeholder",
|
||||
hint: "hint",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
type: "wm-text_input",
|
||||
width: "pa-2",
|
||||
label: "salam",
|
||||
placeholder: "placeholder",
|
||||
hint: "hint",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
type: "wm-text_input",
|
||||
width: "pa-2",
|
||||
label: "salam",
|
||||
placeholder: "placeholder",
|
||||
hint: "hint",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
type: "wm-textarea",
|
||||
width: "pa-2",
|
||||
label: "salam",
|
||||
placeholder: "placeholder",
|
||||
hint: "hint",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
type: "wm-text_input",
|
||||
width: "pa-2",
|
||||
label: "salam",
|
||||
placeholder: "placeholder",
|
||||
hint: "hint",
|
||||
color: "red"
|
||||
}
|
||||
],
|
||||
// values: {},
|
||||
values:{
|
||||
'input_1': 'saeid',
|
||||
'input_2': {
|
||||
'input_3' : 5,
|
||||
'input_4' : {
|
||||
'input_5': 'true',
|
||||
'input_6': 'khobi'
|
||||
},
|
||||
'input_7': 'na',
|
||||
},
|
||||
'input_8': 'shoma khobi \n man khobam',
|
||||
'input_9': 'hossein',
|
||||
}
|
||||
}),
|
||||
props:{
|
||||
props: {
|
||||
// elements: {
|
||||
// type: Array,
|
||||
// required: true
|
||||
// },
|
||||
// values:{
|
||||
// required: false
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
setDefaultValue(elements, values = {}) {
|
||||
for (const key in elements) {
|
||||
if (elements.hasOwnProperty(key)) {
|
||||
if (elements[key].type == "wm-form") {
|
||||
values["input_" + elements[key].id] = this.setDefaultValue(elements[key].children);
|
||||
} else {
|
||||
values["input_" + elements[key].id] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
return values;
|
||||
},
|
||||
register(){
|
||||
console.log(this.values);
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.values = this.setDefaultValue(this.elements);
|
||||
},
|
||||
// watch: {
|
||||
// values() {
|
||||
// if (!this.values || this.values.length == 0) {
|
||||
// this.values = this.setDefaultValue(this.elements);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
Loading…
Reference in new issue