I encountered an issue with my application that involves a form contained within a child component. The parent passes a prop (wizardData) to the child component. If the form is being used to input new data, the field values in the prop will be null; but if the user is reviewing or editing stored data, the field values will contain the relevant information.
The problem arises when trying to edit stored data. Even though the form fields are filled with the stored values, clicking on any field causes all values in the form to disappear and the $emit call updates the parent with null values instead.
I need help figuring out what I am doing wrong in this situation.
Thank you, Tom
Child Component:
<template>
<div>
<form @input="submit" class="form">
<v-card-text>
<v-text-field
model='wizardData.product'
type="text"
label="Name"
box
max="100%"
autofocus
></v-text-field>
<v-text-field
model='wizardData.source'
type="text"
label="Source"
box
></v-text-field>
</v-card-text>
</div>
</template>
<script>
export default {
props: {
wizardData: {
type: Object,
required: true
}
},
data() {
return {
form: {
product: null,
source: null,
}
}
},
submit () {
this.$emit('update', {
data: {
product: this.form.product,
source: this.form.source,
},
})
},
}
}
</script>
This is how my prop 'wizardData' looks like:
wizardData
{
"product": "Cucumber",
"source": "D112",
}