Soy nuevo en Vue y JavaScript, así que ayúdame a entender este problema:
Quiero mostrar dinámicamente diferentes elementos de lienzo en una página. El dibujo del lienzo se define en un archivo script.js separado.
Aquí hay una sección de mi código:
<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>secuencia de comandos.js:
function drawHeart() { let heartCanvas = document.getElementById("heartCanvas"); let c = heartCanvas.getContext('2d'); c.beginPath(); ... } Sin embargo, cuando aparece un elemento de lienzo, no se dibuja mediante la función javascript drawXY(). Me parece que el evento de carga no se activa cuando el elemento aparece en la página. También lo probé con la expresión Vue v-on:load="drawXY" sin éxito. Cuando cambio el desencadenador de eventos a onclick , funciona, pero eso no es lo que necesito.
¡Así que finalmente encontré una solución para mi problema!
Como aprendí, los eventos de carga no son compatibles con todos los elementos HTML, solo algunos, como <body>, <frame>, <iframe>, <img> , ... Consulte https://stackoverflow.com/a/42004669
Así que agregué una imagen vacía después del elemento canvas, que ejecuta la función drawXY() al cargar la imagen.
Aquí está el código actualizado:
<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> Es la mejor solución que he encontrado, ya que otras variantes, como ejecutar la función justo después de seleccionar una casilla de verificación, generalmente no funcionan porque el elemento <canvas> aún no se representa y, como consecuencia, document.getElementById devuelve nulo. Las etiquetas <script> no están permitidas dentro de las plantillas v-if, ya que podrían tener efectos secundarios desagradables.
Pero si tiene una mejor solución, ¡no dude en compartirla!