How to use prop variables inside vue formulate?

Question

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?

Answer 1

You should use

formData.Notes.length

instead of

this.formData.Notes.length