willaengine/resources/js/Global/components/FormLoader/Wrapper.vue

<template>
	<div>
		<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";
export default {
	components: {
		"element-factory": Factory
	},
	data: () => ({
		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: {
		// 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>