'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 |
|---|
