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

<template>
	<div class="row">
		<element-factory
			v-for="element in elements"
			:element="element"
			:values="formValues"
			:key="element.id"
			@input="changeValue"
		></element-factory>
	</div>
</template>
<script>
import Factory from "./FactoryPattern";
export default {
	components: {
		"element-factory": Factory
	},
	props: {
		elements: {
			required: true,
			default: {},
		},
		value:{
			required: false,
			default:() => ({}),
			type: Object
		}
	},
	methods: {
		setDefaultValue(elements, values = {}) {
			for (const key in elements) {
				if (elements.hasOwnProperty(key)) {
					if (elements[key].type == "we-form") {
						values[
							elements[key].slug
						] = this.setDefaultValue(elements[key].children);
					} else {
						values[elements[key].slug] = "";
					}
				}
			}
			return values;
		},
		changeValue() {
			this.$emit('input', this.formValues);
		}
	},
	computed: {
		formValues:{
			get() {
				if (!this.value || Object.keys(this.value).length == 0) {
	            	return this.setDefaultValue(this.elements);
				}
				return this.value;
			},
			set(value) {
				this.$emit('input', value);
			}
		}
	},
	// created() {
	// 	var vm = this;
	// 	setInterval(function() {
	// 		console.log('setInterval-values', vm.values);
	// 		console.log('setInterval-formValues', vm.formValues);
	// 	},3000);
	// },
	// watch: {
	// 	values(v) {
	// 		console.log('v',v);
	// 	},
	// 	formValues(v) {
	// 		console.log('fv',v);
	// 	}
	// },
};
</script>