Código en la etiqueta de la plantilla
<vs-collapse class="p-0"> <vs-collapse-item :open="showAllTriggerRequirements" class="content-collapse p-0 item-header"> <EntryExitConditons v-if="alert.trigger_requirements && alert.trigger_requirements.length > 0" :conditions="alert.trigger_requirements" :size="'xs'" ></EntryExitConditons> </vs-collapse-item> </vs-collapse>Código en etiqueta de secuencia de comandos
watch: { showTriggerRequirements(value) { console.log("////////////////showTriggerRequirements",value); }, selectedfilterName(value) { if (value === "Display Trigger Requirements") { console.log("////////////////trigger requirementVLAUEEEE",value); this.showTriggerRequirements = true; } else if (value === "Hide Trigger Requirements") { this.showTriggerRequirements = false; } }, }, computed: { showAllTriggerRequirements() { return this.showTriggerRequirements }, } Estoy usando el estado selectedfilterName para alternar mi estado showTriggerRequirements . El estado showTriggerRequirements se está actualizando (he visto su valor). Inspeccioné la etiqueta vs-collapse-item y su valor de accesorio open se está actualizando, pero el cambio no se refleja en la interfaz de usuario, cuando cambia el valor de accesorio open en la etiqueta vs-collapse-item , la interfaz de usuario no se actualiza . ¿Cómo puedo actualizar mi interfaz de usuario? ¿No es Vue responsable de actualizar la interfaz de usuario cuando cambia un estado reactivo?
Estaba renderizando este componente vs-collapse en un bucle for sin usar el accesorio clave. Vue usa Key prop para detectar reactividad y actualiza la interfaz de usuario. Creé un método para crear una representación contundente para actualizar la interfaz de usuario.
<vs-collapse :key="componentKey" class="p-0"> <vs-collapse-item :open="showAllTriggerRequirements" class="content-collapse p-0 item-header"> <EntryExitConditons v-if="alert.trigger_requirements && alert.trigger_requirements.length > 0" :conditions="alert.trigger_requirements" :size="'xs'" ></EntryExitConditons> </vs-collapse-item> </vs-collapse>En mi sección de métodos, creo este siguiente método: -
forceRerender() { this.componentKey += 1; } Aquí, this.componentKey es un estado que creé en el método data() (estoy usando las opciones API/Vue@2).
Utilizo el método anterior en la propiedad calculada para provocar una nueva representación: -
showAllTriggerRequirements() { this.forceRerender(); return this.showTriggerRequirements },