OK, so this is the high level. I have 3 objects under a data() field
data () {
birth_day: '',
birth_month: '',
birth_year: '',
birthdate: '',
}
I also have a 4th data object called birthdate as you can see above. When a user fills in each item, I want to combine them into birthdate in the format YEAR-MONTH-DAY (for Database storage)
I also, if possible, want to add a 0 if someone types say 3 for March and not 03
I am having an issue wrapping my head around this. This is part of a multi-step registration form.
Any help would be very helpful!
PS for anyone asking - this is the template code:
<div class="flex flex-row justify-between">
<div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-red-600 focus-within:border-red-600">
<label for="birth_month" value="birth_month" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Month</label>
<input minlength="2" maxlength="2" type="text" name="birth_month" id="birth_month" class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" placeholder="02" />
</div>
<div class="relative border border-gray-500 rounded-md px-3 py-2 mx-4 shadow-sm focus-within:ring-1 focus-within:ring-red-600 focus-within:border-red-600">
<label for="birth_day" value="birth_day" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Day</label>
<input minlength="2" maxlength="2" type="text" name="birth_day" id="birth_day" class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" placeholder="15" />
</div>
<div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-red-600 focus-within:border-red-600">
<label for="birth_year" value="birth_year" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Year</label>
<input minlength="4" maxlength="4" type="text" name="birth_year" id="birth_year" class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" placeholder="2000" />
</div>
</div>
If I understood you correctly try like following snippet:
new Vue({
el: '#demo',
data() {
return {
birth_day: '',
birth_month: '',
birth_year: '',
birthdate: '',
}
},
methods: {
formatNr(nr) {
if(this[nr].length < 2) this[nr] = `0${this[nr]}`
},
formatDate() {
return `${this.birth_year}-${this.birth_month}-${this.birth_day}`
},
save() {
this.birthdate = this.formatDate()
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div>
<div>
<label for="birth_month" value="birth_month">Month</label>
<input v-model="birth_month" @blur="formatNr('birth_month'), save()" minlength="2" maxlength="2" type="text" name="birth_month" id="birth_month" placeholder="02" />
</div>
<div>
<label for="birth_day" value="birth_day">Day</label>
<input v-model="birth_day" @blur="formatNr('birth_day'), save()" minlength="2" maxlength="2" type="text" name="birth_day" id="birth_day" placeholder="15" />
</div>
<div>
<label for="birth_year" value="birth_year">Year</label>
<input v-model="birth_year" @blur="save()" minlength="4" maxlength="4" type="text" name="birth_year" id="birth_year" placeholder="2000" />
</div>
</div>
<h4>birthdate: {{ birthdate }}</h4>
</div>