Vue Snippet work

file.vue

<template>
	<v-container class="new-mone" v-if="formSchema">
		<v-row>
			<v-col>
				<h1>
					{{ formName }}
				</h1>
			</v-col>
		</v-row>
		<v-row>
			<v-col
				cols="5"
				v-for="fieldData in formSchema"
				:key="fieldData.record_number"
			>
				<!-- {{ fieldData }} -->
				<unique v-if="fieldData.unique" :content="fieldData" />

				<from-table
					v-else-if="
						fieldData.ref_table && !fieldData.dependant_from_field
					"
					:content="fieldData"
					@setRelatedFields="setRelatedFields"
				/>

				<date-picker
					v-else-if="fieldData.type === 'date'"
					:content="fieldData"
				/>

				<basic-input
					v-else-if="!fieldData.unique"
					:content="fieldData"
				/>
			</v-col>
		</v-row>
		<v-row>
			<v-col cols="4">
				<v-btn block color="success" @click="saveRecord">Save</v-btn>
			</v-col>
		</v-row>
	</v-container>
</template>

<style scoped></style>

<script>
import BasicInput from "../components/inputs/Basic";
import FromTable from "../components/inputs/FromTable";
import DatePicker from "../components/inputs/DatePicker";
import Unique from "../components/inputs/Unique.vue";
export default {
	name: "New-Mone",
	data() {
		return { formSchema: null };
	},
	i18n: {
		messages: {
			he: {
				success: "רשומה נשמרה בהצלחה",
				error: {
					empty: "נא למלא שדה",
					unique: "שדה לא מאומת",
					formNameOrSchema: "שגיאה באיתור סכמה או תרגום שמות שדה",
				},
			},
		},
	},
	computed: {
		translation() {
			return this.$store.getters.translation;
		},
		formName() {
			if (!this.translation || !this.formSchema) return;
			const formName =
				this.translation[this.formSchema[0].form_name] ||
				this.$t("error.formNameOrSchema");
			return formName.replace(/_/g, " ");
		},
		currentRecord() {
			return this.$store.getters.currentRecord;
		},
	},
	methods: {
		contentFactory(fieldData) {
			return fieldData;
		},
		setRelatedFields({ record, content }) {
			console.log("setRelatedFields:", {
				record,
				content,
				formSchema: this.formSchema,
			});

			content.emit_to.forEach((field) => {
				const targteField = this.formSchema.find(
					(f) => f.field_name === field.fieldName
				);
				if (targteField) {
					targteField.value = record[field.column];
				}
			});
		},
		saveRecord() {
			var errFlag = false;
			this.formSchema.forEach((field) => {
				if (field.required && !field.value) {
					errFlag = true;
					this.$toast.open({
						message:
							this.$t("error.empty") +
							":" +
							field.hebrew_name.replace(/_/g, " "),
						type: "error",
					});
				}
				if (field.unique && !field.verified && field.value) {
					errFlag = true;
					this.$toast.open({
						message:
							this.$t("error.unique") +
							":" +
							field.hebrew_name.replace(/_/g, " "),
						type: "error",
					});
				}
			});

			if (errFlag) return;
			//perform save
			this.$toast.open({
				message: this.$t("success"),
				type: "success",
			});
			this.$router.push("/");
		},
	},
	created() {
		this.$store
			.dispatch({
				type: "getFormSchema",
				formSchema: this.$route.path.replace("/", ""),
			})
			.then((res) => {
				this.formSchema = res;
				if (this.currentRecord) {
					console.log(
						"🚀 ~ file: RecordForm.vue ~ line 156 ~ .then ~ this.currentRecord",
						this.currentRecord
					);
					for (const key in this.currentRecord) {
						const recordValue = this.currentRecord[key];
						const targetField = this.formSchema.find((field) => {
							console.log(field, field.field_name, key);
							return field.field_name === key;
						});
						if (targetField) targetField.value = recordValue;
					}
				}
			});
	},
	components: { BasicInput, FromTable, DatePicker, Unique },
};
</script>