Estado y métodos de Vue — Lo reactivo ch objeto y métodos de plantilla disponibles.
Véase también: Marcado y estructura de las plantillas | Estilo y variables CSS
La plantilla de la sala de espera funciona gracias a un único objeto reactivo de Vue 3 llamado ch. Este objeto contiene todo el estado de la cola —posición, tiempo de espera estimado, temporizadores de cuenta atrás, datos de formularios e indicadores de funciones— y se actualiza automáticamente a medida que la aplicación consulta la API de CrowdHandler. No es necesario que gestiones tú mismo este estado; basta con vincularte a sus propiedades mediante las directivas estándar de Vue (v-if, v-else, {{ }} interpolación, :estilo, etc.) y tu plantilla reaccionará a los cambios en tiempo real. Piensa en ch como una API de datos de solo lectura que describe el estado actual de la cola.
Objetos de estado#
Estado principal: ch#
| Propiedad |
Tipo |
Descripción |
ch.isLoaded |
booleano |
verdadero cuando se cargan los datos iniciales |
ch.isActive |
booleano |
verdadero cuando el usuario se encuentra en la cola activa |
ch.isCountdown |
booleano |
verdadero cuando la cola aún no se ha abierto |
ch.isBlocked |
booleano |
verdadero cuando se bloquea al usuario |
ch.isRoomFull |
booleano |
verdadero cuando la cola está llena |
ch.isError |
booleano |
verdadero cuando se produjo un error |
ch.captchaRequired |
booleano |
verdadero cuándo hay que completar el captcha |
ch.position |
número | nulo |
Posición actual en la cola (a partir de 1). null al hacer el check-in |
ch.estimate |
número | nulo |
Tiempo de espera estimado en minutos |
ch.eta |
cadena | nulo |
Hora estimada de llegada (cadena de texto con formato de hora) |
título del capítulo |
cadena |
Título del evento/de la sala |
ch.message |
cadena |
Mensaje personalizado desde la configuración de la sala |
ch.logo |
cadena |
URL de la imagen del logotipo |
ch.stock |
número | nulo |
Stock disponible (si se ha configurado) |
ch.onsale |
cadena |
Fecha ISO en la que se abre la cola |
ch.solicitado |
cadena |
Fecha y hora de la última solicitud a la API |
ch.sessionsExpire |
número |
Si las sesiones caducan (valor distinto de cero = verdadero) |
ch.sessionsTimeout |
número |
Minutos que quedan hasta que caduque la sesión |
ch.emailDisponible |
número |
Si las notificaciones por correo electrónico están activadas (valor distinto de cero = verdadero) |
ch.anuncio |
cadena |
Texto de anuncio para lectores de pantalla |
ch.progress |
número |
Porcentaje de la barra de progreso (0-100) |
ch.nextPoll |
número |
Segundos desde la última encuesta |
ch.pollTTL |
número |
Intervalo de sondeo actual en segundos (por defecto 60, variable) |
ch.css.title |
cadena |
Clase de tamaño de título dinámico ("", "ch-title-lg", o "ch-title-xl") |
Estado del token: ch.token#
| Propiedad |
Tipo |
Descripción |
ch.token.value |
cadena | nulo |
Valor total del token |
ch.token.ofuscado |
cadena | nulo |
Símbolo parcialmente oculto para su visualización |
ch.token.copied |
booleano |
verdadero inmediatamente después de que el usuario copie el token |
ch.token.copy(event, ch) |
función |
Copiar el token al portapapeles |
Estado del correo electrónico: ch.email#
| Propiedad |
Tipo |
Descripción |
ch.email.value |
cadena |
Dirección de correo electrónico introducida |
ch.email.valid |
booleano |
Si el formato del correo electrónico es válido |
ch.email.submitted |
booleano |
Si el correo electrónico se ha enviado correctamente |
ch.email.submitting |
booleano |
verdadero durante el envío |
ch.email.cambio |
booleano |
verdadero cuando el usuario modifica una dirección de correo electrónico ya introducida |
Estado del código de prioridad: ch.prioridad#
| Propiedad |
Tipo |
Descripción |
ch.priority.available |
número | nulo |
Si los códigos de prioridad están activados (valor distinto de cero = verdadero) |
ch.prioridad.código |
cadena | nulo |
Código de prioridad introducido |
ch.priority.valid |
booleano | nulo |
Si el formato del código es válido |
ch.priority.submitted |
booleano |
Si se ha enviado el código |
ch.priority.submitting |
booleano |
verdadero durante el envío |
ch.priority.success |
booleano |
verdadero si se aceptó el código |
ch.priority.error |
booleano |
verdadero si se rechazó el código |
Estado de la cuenta atrás: ch.countdown#
Disponible cuando ch.isCountdown es cierto.
| Propiedad |
Tipo |
Descripción |
ch.countdown.sHours |
cadena |
Horas, con ceros a la izquierda («02») o «--» antes de «init» |
ch.countdown.sMinutes |
cadena |
Minutos, con ceros a la izquierda («05») o «--» antes de «init» |
ch.countdown.sSeconds |
cadena |
Segundos, con ceros a la izquierda («30») o «--» antes de la inicialización |
ch.countdown.hours |
número |
Horas expresadas en forma numérica |
ch.countdown.minutos |
número |
Minutos en forma de número |
ch.countdown.seconds |
número |
Segundos como número |
ch.countdown.totalseconds |
número |
Total de segundos restantes |
Métodos disponibles#
| Método |
Descripción |
validateEmail() |
Comprueba el formato del correo electrónico y lo actualiza ch.email.valid |
submitEmail() |
Introduce una dirección de correo electrónico para recibir notificaciones |
changeEmail() |
Pasa al estado «cambio de correo electrónico» |
cancelChangeEmail() |
Anula el cambio de correo electrónico y vuelve a la página de confirmación |
checkValidPriorityCode() |
Comprueba que el formato del código de prioridad sea correcto |
prioritySubmit() |
Envía el código de prioridad |
formatDate(fecha, formato) |
Da formato a la cadena de fecha (véase más abajo) |
Opciones de «formatDate»#
formatDate(ch.requested, 'toLocaleString') // «27/1/2026, 14:30:00»
formatDate(ch.requested, 'toLocaleDateString') // «27/1/2026»
formatDate(ch.requested, 'toLocaleTimeString') // «2:30:00 p. m.»
formatDate(ch.requested, 'dayMonth') // «27 de enero»
formatDate(ch.requested, 'weekdayMonthDay') // «Martes, 27 de enero»
formatDate(ch.requested, 'iso') // «2026-01-27T14:30:00.000Z»
formatDate(ch.requested, 'YYYY-MM-dd HH:mm:ss') // "2026-01-27 14:30:00"