comparison client/src/components/gauge/Waterlevel.vue @ 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 a409608dd6b3
children ad27721d804d
comparison
equal deleted inserted replaced
3302:ec6163c6687d 3303:d6405c6769a3
1189 }, 1189 },
1190 created() { 1190 created() {
1191 window.addEventListener("resize", debounce(this.drawDiagram), 100); 1191 window.addEventListener("resize", debounce(this.drawDiagram), 100);
1192 }, 1192 },
1193 mounted() { 1193 mounted() {
1194 this.drawDiagram(); 1194 // Nasty but necessary if we don't want to use the updated hook to re-draw
1195 // the diagram because this would re-draw it also for irrelevant reasons.
1196 // In this case we need to wait for the child component (DiagramLegend) to
1197 // render. According to the docs (https://vuejs.org/v2/api/#mounted) this
1198 // should be possible with $nextTick() but it doesn't work because it does
1199 // not guarantee that the DOM is not only updated but also re-painted on the
1200 // screen.
1201 setTimeout(this.drawDiagram, 50);
1202
1195 this.templates[0] = this.defaultTemplate; 1203 this.templates[0] = this.defaultTemplate;
1196 this.form.template = this.templates[0]; 1204 this.form.template = this.templates[0];
1197 this.templateData = this.form.template; 1205 this.templateData = this.form.template;
1198 HTTP.get("/templates/diagram", { 1206 HTTP.get("/templates/diagram", {
1199 headers: { 1207 headers: {