'How to take component's inputed value to submit in the main form in Nuxt?

I have a component, let's call it DateDropdown.vue

<template>
  <v-row align="center" class="mt-1">
    <v-col class="d-flex" cols="12" sm="4">
      <v-select
        v-model="tanggal"
        class="ttd"
        placeholder="Hari"
        :items="dates"
        :item-text="dates"
        :item-value="dates"
        outlined
        @focus="reset"
        @change="dateTimeCreate()"
      />
    </v-col>
    <v-col class="d-flex" cols="12" sm="4">
      <v-select
        v-model="bulan"
        class="ttd"
        placeholder="Bulan"
        :items="month"
        :item-text="month"
        :item-value="month"
        outlined
        @focus="reset"
        @change="dateTimeCreate()"
      />
    </v-col>
    <v-col class="d-flex" cols="12" sm="4">
      <v-select
        v-model="tahun"
        class="ttd"
        placeholder="Tahun"
        :items="years"
        :item-text="years"
        :item-value="years"
        outlined
        @focus="reset"
        @change="dateTimeCreate()"
      />
    </v-col>
    <input :value="dateTimeCreate()" hidden>
  </v-row>
</template>

<script>
export default {
  data () {
    return {
      dates: [...Array(31).keys()].map(x => x + 1),
      // month: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'Nopember', 'Desember'],
      month: [...Array(12).keys()].map(x => x + 1),
      years: [...Array(new Date().getFullYear()).keys()].map(x => x + 1970),
      tanggal: `${this.tanggal}`,
      bulan: `${this.bulan}`,
      tahun: `${this.tahun}`
    }
  },
  methods: {
    dateTimeCreate () {
      if (this.tanggal || this.bulan || this.tahun !== undefined) {
        return new Date(this.tahun + '/' + (this.bulan < 10 ? '0' + this.bulan : this.bulan) + '/' + (this.tanggal < 10 ? '0' + this.tanggal : this.tanggal))
      } else {
        return null
      }
    }
  }
}

Before you tell me about validation, yes i skip the validation stuff cause all i want to know right now is how to take this inputted data and let it's value to be store in this.tanggalLahir inside submitThis() in this index.vue below:

<template>
  <v-container class="mt-10">
    <v-row justify="center">
      <h1 class="heading1">
        Pendaftaran Program <br>
        Menjadi Dukun Cuaca
      </h1>
    </v-row>
    <v-row justify="center" align="center" class="pb-10">
      <v-card width="550">
        <span class="note-big text-start mb-2"> Silakan melengkapi data di bawah ini </span>
        <form class="mt-4" enctype="multipart/form-data" @submit.prevent="submitThis">
<label> Nama Lengkap </label>
          <v-text-field v-model="namaLengkap" :rules="namaLengkapRules" class="up" placeholder="Masukkan Nama Lengkap" outlined />
          <label> Tanggal Lahir </label>
          <utility-date-drop-down v-model="tanggalLahir" />
<label> Nomor Handphone</label>
          <p class="note-mini up" style="margin-top: 1px">
            Pastikan nomor yang digunakan aktif
          </p>
          <v-text-field v-model="nomorHP" :rules="nomorHpRules" placeholder="08xx xxxx xxxx" type="tel" outlined />
<v-btn block type="submit" style="margin-top: 32px" color="primary" large>
            Daftar
          </v-btn>
        </form>
      </v-card>
    </v-row>
  </v-container>
</template>

<script>
import DateDropDown from '~/components/Utility/DateDropDown/DateDropDown.vue'

export default {
  layout: 'empty',
  component: {
    DateDropDown
  },
  data () {
    return {
   namaLengkapRules: [v => !!v || 'Nama Lengkap belum diisi'],
      nomorHpRules: [v => !!v || 'Nomor Handphone belum diisi'],
      emailRules: [v => regexEmail.test(v) || 'Email tidak valid'],
      jenisKelaminRules: [(s => s === true).length > 0 || 'Jenis Kelamin belum diisi'],
      form: {
        nik: '',
        namaLengkap: '',
        tanggalLahir: '',
        nomorHP: 0
      }
    }
  },
  methods: {
    submitThis (e) {
      const form = e.target
      const formData = new FormData(form)
      for (const [inputName, value] of formData) {
        this.tanggalLahir = { inputName, value }
        console.log(this.namaLengkap, this.tanggalLahir, this.nomorHP)
      }
    }
  }
}
</script>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source