Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

uniqueginun's avatar

sync parent form data with child props in vue js 2

Hello Everyone

I have a parent vue component that has a form data and has many child components that I pass some of form data to them as props and I want to keep it in sync so when the child change the props value it reflects on parent component


// child component
<template>
		<input type="text" v-model="fields.name" />
</template>

<script>
		export default {
				props: ['fields']
		}
</script>


// parent component

<template>
		<form v-on:submit.prevent="send">
				<first-child :fields.sync="form.firstChild" />
		</form>
</template>

<script>
		export default {
				data: () => ({
						form: {
								firstChild: {
										name: ''
								}
						}
				}),

				methods: {
						send() {
								console.log(this.form);
						}
				}
		}
</script>

it's updating when I change it and check vue devtools I see child updated the text. but when I console log the form it shows as bellow: Object { firstChild: Getter & Setter } I want to convert that to normal object so I can send it with Ajax to Laravel route

0 likes
0 replies

Please or to participate in this conversation.