changeset 3303:d6405c6769a3

client: waterlevel diagram: wait for child component before rendering diagram
author Markus Kottlaender <markus@intevation.de>
date Fri, 17 May 2019 09:50:24 +0200
parents ec6163c6687d
children ad27721d804d
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 9 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Thu May 16 18:41:43 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri May 17 09:50:24 2019 +0200
@@ -1191,7 +1191,15 @@
     window.addEventListener("resize", debounce(this.drawDiagram), 100);
   },
   mounted() {
-    this.drawDiagram();
+    // Nasty but necessary if we don't want to use the updated hook to re-draw
+    // the diagram because this would re-draw it also for irrelevant reasons.
+    // In this case we need to wait for the child component (DiagramLegend) to
+    // render. According to the docs (https://vuejs.org/v2/api/#mounted) this
+    // should be possible with $nextTick() but it doesn't work because it does
+    // not guarantee that the DOM is not only updated but also re-painted on the
+    // screen.
+    setTimeout(this.drawDiagram, 50);
+
     this.templates[0] = this.defaultTemplate;
     this.form.template = this.templates[0];
     this.templateData = this.form.template;