Stato e metodi di Vue — Il reattivo ch oggetto e metodi del modello disponibili.
Vedi anche: Markup e struttura dei modelli | Stile e variabili CSS
Il modello della sala d'attesa è basato su un unico oggetto reattivo Vue 3 denominato ch. Questo oggetto contiene tutte le informazioni relative allo stato della coda — posizione, tempo di attesa stimato, timer di conto alla rovescia, dati dei moduli e flag delle funzionalità — e si aggiorna automaticamente man mano che l'applicazione interroga l'API CrowdHandler. Non è necessario gestire manualmente nessuno di questi stati; è sufficiente collegarsi alle sue proprietà utilizzando le direttive standard di Vue (v-if, v-else, {{ }} interpolazione, :stile, ecc.) e il tuo modello reagirà alle modifiche in tempo reale. Pensa a ch come API di dati in sola lettura che descrive lo stato attuale della coda.
Oggetti di stato#
Stato di residenza: ch#
| Proprietà |
Tipo |
Descrizione |
ch.isLoaded |
booleano |
vero quando vengono caricati i dati iniziali |
ch.isActive |
booleano |
vero quando l'utente si trova nella coda attiva |
ch.isCountdown |
booleano |
vero quando la coda non è ancora stata aperta |
ch.isBlocked |
booleano |
vero quando l'utente è bloccato |
ch.isRoomFull |
booleano |
vero quando la coda ha raggiunto la capienza massima |
ch.isError |
booleano |
vero quando si è verificato un errore |
ch.captchaRequired |
booleano |
vero quando è necessario completare il captcha |
ch.position |
numero | null |
Posizione attuale nella coda (a partire da 1). null al momento del check-in |
ch.stima |
numero | null |
Tempo di attesa stimato in minuti |
ch.eta |
stringa | null |
Ora prevista di arrivo (stringa di data e ora formattata) |
titolo del capitolo |
stringa |
Titolo dell'evento/della sala |
ch.message |
stringa |
Messaggio personalizzato dalla configurazione della stanza |
ch.logo |
stringa |
URL dell'immagine del logo |
ch.stock |
numero | null |
Stock disponibile (se configurato) |
ch.in-offerta |
stringa |
Data ISO di apertura della coda |
ch.richiesto |
stringa |
Data e ora dell'ultima richiesta API |
ch.sessionsExpire |
numero |
Se le sessioni scadono (valore diverso da zero = vero) |
ch.sessionsTimeout |
numero |
Minuti rimanenti prima della scadenza della sessione |
ch.emailDisponibile |
numero |
Se le notifiche via e-mail sono attivate (valore diverso da zero = vero) |
ch.annuncio |
stringa |
Testo di annuncio per lettori di schermo |
ch.progress |
numero |
Percentuale della barra di avanzamento (0–100) |
ch.nextPoll |
numero |
Secondi trascorsi dall'ultimo sondaggio |
ch.pollTTL |
numero |
Intervallo di polling corrente in secondi (valore predefinito 60, variabile) |
ch.css.title |
stringa |
Classe di dimensione dinamica del titolo ("", "ch-title-lg", oppure "ch-title-xl") |
Stato del token: ch.token#
| Proprietà |
Tipo |
Descrizione |
ch.token.value |
stringa | null |
Valore totale del token |
ch.token.offuscato |
stringa | null |
Token parzialmente nascosto da visualizzare |
ch.token.copiato |
booleano |
vero subito dopo che l'utente ha copiato il token |
ch.token.copy(event, ch) |
funzione |
Copia il token negli appunti |
Stato dell'e-mail: ch.email#
| Proprietà |
Tipo |
Descrizione |
ch.email.value |
stringa |
Indirizzo e-mail inserito |
ch.email.valid |
booleano |
Se il formato dell'e-mail è valido |
ch.email.inviato |
booleano |
Se l'e-mail è stata inviata con successo |
ch.email.invio |
booleano |
vero durante l'invio |
ch.email.modifica |
booleano |
vero quando l'utente modifica un indirizzo e-mail già inserito in precedenza |
Stato del codice di priorità: ch.priorità#
| Proprietà |
Tipo |
Descrizione |
ch.priority.disponibile |
numero | null |
Se i codici di priorità sono abilitati (valore diverso da zero = vero) |
ch.priority.code |
stringa | null |
Codice di priorità inserito |
ch.priority.valid |
booleano | null |
Se il formato del codice è valido |
ch.priority.submitted |
booleano |
Se il codice è stato inviato |
ch.priority.submitting |
booleano |
vero durante l'invio |
ch.priority.success |
booleano |
vero se il codice fosse stato accettato |
ch.priority.error |
booleano |
vero se il codice è stato respinto |
Stato del conto alla rovescia: ch.countdown#
Disponibile quando ch.isCountdown è vero.
| Proprietà |
Tipo |
Descrizione |
ch.countdown.sHours |
stringa |
Ore, con zeri di riempimento ("02") o "--" prima dell'inizializzazione |
ch.countdown.sMinutes |
stringa |
Minuti, con zeri anteposti ("05") o "--" prima di "init" |
ch.countdown.sSeconds |
stringa |
Secondi, con zero anteposti ("30") o "--" prima di init |
ch.countdown.hours |
numero |
Ore espresse come numero |
ch.countdown.minuti |
numero |
Verbale come numero |
ch.countdown.seconds |
numero |
I secondi espressi come numero |
ch.countdown.totalseconds |
numero |
Totale dei secondi rimanenti |
Metodi disponibili#
| Metodo |
Descrizione |
validateEmail() |
Verifica il formato dell'indirizzo e-mail, aggiorna ch.email.valid |
submitEmail() |
Inserisce l'indirizzo e-mail per ricevere le notifiche |
changeEmail() |
Entra nello stato "modifica indirizzo e-mail" |
cancelChangeEmail() |
Annulla la modifica dell'indirizzo e-mail e torna alla pagina di conferma |
checkValidPriorityCode() |
Verifica il formato del codice di priorità |
prioritySubmit() |
Invia il codice di priorità |
formatDate(data, formato) |
Formatta la stringa di data (vedi sotto) |
Opzioni di formattazione della data#
formatDate(ch.requested, 'toLocaleString') // "27/1/2026, 14:30:00"
formatDate(ch.requested, 'toLocaleDateString') // "27/1/2026"
formatDate(ch.requested, 'toLocaleTimeString') // "2:30:00 PM"
formatDate(ch.requested, 'dayMonth') // "27 gennaio"
formatDate(ch.requested, 'weekdayMonthDay') // "martedì 27 gennaio"
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"