Could you please help me understand why the level: this.globalForm.level in the child component is not updating with the props from the input selector in the parent component?
Parent Component:
<template>
<div>
<div class="form-container">
<select class="form-control" v-model="level">
<option v-for="level in options" v-bind:key="level">{{ level }}</option>
</select>
<button @click="submit()">Create</button>
</div>
<child v-bind:globalForm="globalForm"/>
</div>
</template>
<script>
inputFiled;
export default {
data() {
return {
level: "",
globalForm: {
level: ""
},
options: ["level1", "level2", "level3"]
};
},
components: {
child
},
methods: {
submit() {
this.globalForm.level = this.level;
}
},
watch: {
level() {
this.globalForm.level = this.level;
}
}
};
</script>
Child Component:
<template>
<div class="form-container">
<option v-for="level in options" v-bind:key="level">{{ level }}</option>
</div>
</template>
<script>
export default {
props: { globalForm: Object },
data() {
return {
options: ["level1","level2","level3",],
level: this.globalForm.level //I'm trying to update this but it's not working as expected
};
}
};
</script>