[Vuejs]-How can I draw Canvas conditional onload with v-if?

by

0👍

✅

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!

Leave a comment