I'm new to Vue and JavaScript, so please help me understand this problem:
I want to dynamically showload different canvas elements on a page. The drawing of the canvas is defined in a seperate script.js file.
Here's a section of my code:
<canvas v-if="checkedBoxes.includes('Heart')" onload="drawHeart();" id="heartCanvas" width="300" height="240"></canvas>
<canvas v-if="checkedBoxes.includes('Star')" onload="drawStar();" id="starCanvas" width="240" height="240"></canvas>
script.js:
function drawHeart() {
let heartCanvas = document.getElementById("heartCanvas");
let c = heartCanvas.getContext('2d');
c.beginPath();
... }
However, when a canvas element appears, it is not drawn by the Javascript function drawXY(). It seems to me that the onload event is not triggered when the element appears on the page. I also tried it with the Vue expression v-on:load="drawXY" without success. When i change the event trigger to onclick, it works, but that's not what I need.
So I finally found a solution for my problem!
As I learned, onload events are not supported on every HTML element, only a few such as <body>, <frame>, <iframe>, <img> , ...
See https://stackoverflow.com/a/42004669
So I added an empty image after the canvas element, which executes the drawXY() function on load of the image.
Here's the updated code:
<template v-if="checkedBoxes.includes('Heart')">
<canvas id="heartCanvas" width="300" height="240"></canvas>
<!-- empty image for onload event -->
<img onload="drawHeart();" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />
</template>
<template v-if="checkedBoxes.includes('Star')">
<canvas id="starCanvas" width="240" height="240"></canvas>
<!-- empty image for onload event -->
<img onload="drawStar();" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />
</template>
It's the best workarround I've found, as other variants such as executing the function right after a checkbox is selected usually end up not working because the <canvas> element is not yet rendered and as a consequence, document.getElementById returns null. <script> tags are not allowed within v-if templates as they could have nasty side-effects.
But if you have a better solution, please feel free to share it!