Jun 30, 2022
0
Level 9
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
Please or to participate in this conversation.