Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

387
Vistas
VueJS $refs getContext is not a function

Having trouble adding canvas properties to a canvas that was created dynamically. My VueJS code looks like so:

<div v-if="fieldtype === 'signature'">
    <canvas v-bind:id="en.name" :ref="en.name" class="sigpad"
        v-on:mousedown="drawdown($event, en.name)"
        v-on:mousemove="drawmove($event, en.name)"
        v-on:mouseup="drawup($event, en.name)">
    </canvas>
</div>

This dynamically creates a canvas given that the conditions of my fieldtype variable are met. My JS functions are written as so:

function drawup(ev, eve){
    voo.isDrawing = false;
}

function drawmove(ev, eve){
    let ctx = voo.$refs[eve].getContext('2d');
    if (voo.isDrawing){
        let rect = voo.$refs[eve];
        let elementRelativeX = ev.offsetX;
        let elementRelativeY = ev.offsetY;
        let cX = elementRelativeX * rect.width / rect.clientWidth;
        let cY = elementRelativeY * rect.height / rect.clientHeight;
        ctx.lineTo(cX, cY);
        ctx.stroke();
    }
}

function drawdown(ev, eve){
    let ctx = voo.$refs[eve].getContext('2d');
    voo.isDrawing = true;
    let rect = voo.$refs[eve];
    let elementRelativeX = ev.offsetX;
    let elementRelativeY = ev.offsetY;
    let cX = elementRelativeX * rect.width / rect.clientWidth;
    let cY = elementRelativeY * rect.height / rect.clientHeight;
    ctx.moveTo(cX, cY);
}

When applied to a canvas that isn't dynamically created, the scripts work. However, on this dynamically created canvas I get the error message Error in v-on handler: "TypeError: voo.$refs[eve].getContext is not a function"

What can I do to add the getContext property to work on my canvas?

Oh, and for clarity, voo is my Vue instance.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda