I was trying to pass data to a child component using v-bind for my vue formulate form input. I passed data like this in parent.
<ChildForm v-bind:formData="formData" ></ChildForm>
export default {
name: "Parent",
data() {
return {
formData: {
Full_Name: "",
Notes: "",
Address: "",
Phone: "",
City: "",
State: "",
Zip: "",
},
}}}
And in Child, I'm doing this
<FormulateForm v-model="formData">
<FormulateInput
type="textarea"
name="Notes"
label="NOTES"
validation="required|max:200,length"
validation-name="Notes"
:help="`Keep it under 200 characters. ${200 - this.formData.Notes.length} left.`"
/>
<FormulateInput
type="submit"
label="Submit Details"
/>
</FormulateForm>
export default {
name: "ChildForm",
props: {
formData: Object,
},
}
But I'm getting the following error
Error in render: "TypeError: Cannot read property 'length' of undefined"
Any idea what might be the issue?
You should use
formData.Notes.length
instead of
this.formData.Notes.length
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.