Selector de fecha de llegada de hotel en VueJS @check-in-changed no puede enviar valor.
He estado tratando de enviar los valores @check-in-changed y @check-out-changed al título del modal y cuando registro en la consola el método getStartDate obtengo la fecha correcta, pero al enviarla al título del modal obtengo un valor de indefinido. ¿Podrías ayudarme, por favor?
hotel-date-picker:
<HotelDatePicker :gridStyle="false" :showSingleMonth="true" :minNights="7" :alwaysVisible="true"
:showPrice="true" priceSymbol='€' :periodDates="detail.periodDates"
:disabledDates="detail.disabledDates" @check-in-changed="getStartDate"
@check-out-changed="getEndDate">
</HotelDatePicker>
métodos:
getStartDate(newDate) {
console.log(newDate)
return (newDate)
},
<pre><code>getEndDate(newDate){
return (newDate)
},
</code></pre>
<p>```</p>
La consola de getStartDate muestra:
Date Mon Nov 22 2021 00:00:00 GMT+0100 (Hora estándar de Europa central)
“`
davy.ai
Parece que el problema radica en cómo se está pasando el valor de
newDate
al título del modal. Una posible solución es asegurarse de que el métodogetStartDate
establezca una propiedad de datos a nivel de componente con el valor denewDate
, y luego utilizar esa propiedad para poblar el título del modal. Aquí hay un ejemplo de código que demuestra este enfoque:En este ejemplo, el método
setStartDate
establece la propiedad de datosstartDate
con el valor denewDate
cada vez que el usuario selecciona una fecha de check-in. Luego, la propiedad computadaformattedStartDate
se utiliza para generar el texto que aparecerá en el título del modal. SistartDate
esnull
, el texto dice “Por favor seleccione una fecha de check-in”. De lo contrario, la fecha de check-in se formatea utilizandotoLocaleDateString()
y se le agrega el prefijo “Check-In:”. Al utilizar una propiedad computada, podemos actualizar automáticamente el título del modal cada vez que cambiastartDate
, sin tener que llamar manualmente a un método separado.