Getting form data

[LadIQe]

Hi guys, Im trying to access my form data, but without any success (this is possible with formik, but in react).

Problem is, that my form is something like top wrapper and inside are multiple vue components, so every component has its own data for inputs, checkboxes etc.

Now, is there a way how to access all data inside form after validation in onSubmit method?

Thanks

Here is form:

<template>
  <q-page padding>
    <q-form @submit="onSubmit">
      <Header />

      <Footer />

      <div class="q-mt-xl">
        <q-btn label="Submit" type="submit" color="primary" />
      </div>
    </q-form>
  </q-page>
</template>

<script>
import Header from 'components/OrderSheet/OrderSheetHeader'
import Footer from 'components/OrderSheet/OrderSheetFooter'

export default {
  components: {
    Header,
    Footer,
  },

  methods: {
    onSubmit(values) {
      console.log(values)
    },
  },
}
</script>

and here is for example header (just script)

<script>
import { required } from 'src/utils/validations'

export default {
  name: 'OderSheetHeader',
  props: {
    headerData: {
      type: Object,
      required: false,
      default() {
        return {
          name: '',
          number: '',
          street: '',
          town: '',
          email: '',
          phone: '',
          bussines_id: '',
          tax_id: '',
          brand: '',
          model: '',
          license_number: '',
          model_year: '',
          engine_code: '',
          mileage: '',
          vin: '',
        }
      },
    },
  },

  data() {
    return {
      ...this.headerData,
    }
  },

  methods: {
    required,
  },
}
</script>

[s.molinari]

Props down, events up between parent and child components. ( Or, you can cheat using an object, but don’t tell anyone I told you). Where is the data being passed to the header component from the form?

Scott