OK, entonces este es el nivel alto. Tengo 3 objetos bajo un campo de datos ()
data () { birth_day: '', birth_month: '', birth_year: '', birthdate: '', }También tengo un cuarto objeto de datos llamado fecha de nacimiento, como puede ver arriba. Cuando un usuario completa cada elemento, quiero combinarlos en la fecha de nacimiento en el formato AÑO-MES-DÍA (para el almacenamiento de la base de datos)
También, si es posible, quiero agregar un 0 si alguien escribe 3 para marzo y no 03
Tengo un problema envolviendo mi cabeza alrededor de esto. Esto es parte de un formulario de registro de varios pasos.
¡Cualquier ayuda sería muy útil!
PD para cualquiera que pregunte: este es el código de la plantilla:
<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>Si te entendí correctamente, prueba con el siguiente fragmento:
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>