Estoy usando un cuadro de diálogo vaadin en mi aplicación de componentes web. Me gustaría que los componentes del interior se representaran cuando cambian las propiedades, pero no lo hacen.
Tengo un par de propiedades en mi componente web:
static get properties() { return { title: { type: String }, username: { type: String }, signUpOpened: { type: Boolean }, }; } El diálogo se define como tal. Uso una función para vincularlo al DialogRenderer . El cuadro de diálogo no debe estar siempre abierto, por lo que el usuario hace clic en él para abrirlo.
render() { return html` <main> <h1>${this.title}</h1> <vaadin-dialog header-title="SignUp" .opened="${this.signUpOpened}" @opened-changed="${e => (this.signUpOpened = e.detail.value)}" ${dialogRenderer(this.signUpRenderer)} id="signUp"> </vaadin-dialog> </main> `; } signUpRenderer() { return html` <vaadin-text-field value="${this.username}" @change="${(e) => { this.username = e.target.value }}" label="email"></vaadin-text-field> <vaadin-text-field value="${this.username}" }}" label="email-copy"></vaadin-text-field> <p>${this.username}</p> `; }Puedes probar la demostración aquí , el código fuente está aquí .
Al cambiar el valor del campo de texto, puede ver que el otro campo de texto y el párrafo no se actualizan.
¿Me pueden orientar sobre lo que está pasando?
La directiva dialogRenderer que está utilizando para representar el contenido del cuadro de diálogo necesita saber si los datos utilizados en la representación han cambiado para determinar si debe volver a representar el contenido o no. Para ese propósito, la directiva tiene un segundo parámetro que le permite pasar una serie de dependencias que se verificarán en busca de cambios. En su ejemplo, debe aplicar la directiva así, para que se vuelva a procesar cuando cambie el nombre de usuario:
<vaadin-dialog ... ${dialogRenderer(this.signUpRenderer, [this.username])}> </vaadin-dialog>Esto se explica en el JSdoc de la directiva ; desafortunadamente, las directivas no aparecen en los documentos API del componente en este momento. Puede abrir un problema aquí y solicitar mejorar la documentación del componente para agregar una sección que explique cómo funcionan las directivas.