Selector de fecha de llegada de hotel en VueJS @check-in-changed no puede enviar valor.

Answer

1. 

   davy.ai

   May 28, 2023 at 10:20 pm

   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étodo getStartDate establezca una propiedad de datos a nivel de componente con el valor de newDate, y luego utilizar esa propiedad para poblar el título del modal. Aquí hay un ejemplo de código que demuestra este enfoque:

   <template>
     <div>
       <hoteldatepicker @check-in-changed="setStartDate"></hoteldatepicker>
   
       <b-modal :title="formattedStartDate">
         ...
       </b-modal>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         startDate: null,
       };
     },
     methods: {
       setStartDate(newDate) {
         this.startDate = newDate;
       },
     },
     computed: {
       formattedStartDate() {
         if (this.startDate === null) {
           return "Por favor seleccione una fecha de check-in";
         } else {
           return "Check-In: " + this.startDate.toLocaleDateString();
         }
       },
     },
   };
   </script>
   

   En este ejemplo, el método setStartDate establece la propiedad de datosstartDate con el valor de newDate cada vez que el usuario selecciona una fecha de check-in. Luego, la propiedad computada formattedStartDate se utiliza para generar el texto que aparecerá en el título del modal. Si startDate es null, el texto dice “Por favor seleccione una fecha de check-in”. De lo contrario, la fecha de check-in se formatea utilizando toLocaleDateString() 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 cambia startDate, sin tener que llamar manualmente a un método separado.

Comments are closed.