Problem with events in Vuejs 2

Question

I found a code a while back and modified it in pure javascript. It worked fine. But now I have to do something similar to what he does in Vue. The problem is that I’m kind of new in Vue and I have little time to finish.

OBS: basically the functionality of the code is to draw freely on the canvas as if it were the Paint. Inside the Vue object has some other things related to the registration, because this functionality is part of a registration form, but it is easy to identify what is the canvas. I imagine it’s something I did against library rules.

OBS 2: The only problem really is the fact that no line is appearing when drawing, but js does not return any type of error.

HTML(this HTML code is inside the registration element)

<div v-show="ativo == true" >
                    <div id="paint">
                        <span id="converter">Confirmar</span>
                         <span id="limpar">Limpar</span>
                         <span v-on:click="ativo = false" id="cancelar">Cancelar</span>
                         <canvas id="canvas" v-on:mousedown="evento1" v-on:mouseup="evento2"></canvas>
                    </div>
                </div>

Anyway, here’s the code in pure js that works:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


var painting = document.getElementById('paint');
var paint_style = getComputedStyle(painting);
canvas.width = parseInt(paint_style.getPropertyValue('width'));
canvas.height = parseInt(paint_style.getPropertyValue('height'));

var mouse = {x: 0, y: 0};

canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft;
  mouse.y = e.pageY - this.offsetTop;
}, false);

ctx.lineWidth = 3;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#6f79ed';

canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);

    canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
};

And here’s the Vue object with the code inside that I tried, apparently flawed, to convert to:

var cadastro = new Vue({
    el:'#cadastro',

    data:{
        pagina:0,
        titulo:["Dados Pessoais", "Endereço", "Curso"],
        nome: '',
        sobrenome: '',
        email:'',
        datanasc:'',
        rg:'',
        cpf:'',
        cep:'',
        logradouro:'',
        numero:'',
        complemento:'',
        bairro:'',
        cidade:'',
        estado:'',
        pais:'',
        opcao1:'',
        unidade1:'',
        opcao2:'',
        unidade2:'',
        mouse: {x:0, y:0},
        canvas: document.getElementById('canvas'),
        ctx: document.getElementById('canvas').getContext('2d'),
        painting: document.getElementById('paint'),
        paint_style: getComputedStyle(document.getElementById('paint')),
        ativo:false
    },

    computed: {
        tituloAtual: function() {
            return this.titulo[this.pagina];
        },
    },

    methods:{
        passarPagina: function(e){
            e.preventDefault();
            this.pagina++;
        },

        voltarPagina: function(e){
            e.preventDefault();
            this.pagina--;
        },

        evento0: function(e){
            cadastro.ctx.lineWidth = 3;
            cadastro.ctx.lineJoin = 'round';
            cadastro.ctx.lineCap = 'round';
            cadastro.ctx.strokeStyle = '#6f79ed';
            cadastro.canvas.width = parseInt(cadastro.paint_style.getPropertyValue('width'));
            cadastro.canvas.height = parseInt(cadastro.paint_style.getPropertyValue('height'));


             cadastro.mouse.x = e.pageX - this.offsetLeft;
             cadastro.mouse.y = e.pageY - this.offsetTop;
        },

        evento1: function(e){
            cadastro.ctx.lineWidth = 3;
            cadastro.ctx.lineJoin = 'round';
            cadastro.ctx.lineCap = 'round';
            cadastro.ctx.strokeStyle = '#6f79ed';
            cadastro.canvas.width = parseInt(cadastro.paint_style.getPropertyValue('width'));
            cadastro.canvas.height = parseInt(cadastro.paint_style.getPropertyValue('height'));



            cadastro.ctx.beginPath();
            cadastro.ctx.moveTo(cadastro.mouse.x, cadastro.mouse.y);
            cadastro.canvas.addEventListener('mousemove', cadastro.onPaint, false);
        },

        evento2: function(e){
            var canvas = document.getElementById('canvas');
            canvas.removeEventListener('mousemove', cadastro.onPaint, false);
        },

        onPaint : function(){
            cadastro.ctx.lineWidth = 3;
            cadastro.ctx.lineJoin = 'round';
            cadastro.ctx.lineCap = 'round';
            cadastro.ctx.strokeStyle = '#6f79ed';
            cadastro.canvas.width = parseInt(cadastro.paint_style.getPropertyValue('width'));
            cadastro.canvas.height = parseInt(cadastro.paint_style.getPropertyValue('height'));
            cadastro.ctx.lineTo(cadastro.mouse.x, cadastro.mouse.y);
            cadastro.ctx.stroke();
        },

        buscaCep: function(event){
            axios.get('http://api.postmon.com.br/v1/cep/'+this.cep )
              .then(function(response){
                cadastro.complemento = response.data.complemento;
                cadastro.bairro = response.data.bairro;
                cadastro.logradouro = response.data.logradouro;
                cadastro.estado = response.data.estado_info.nome;
                cadastro.cidade = response.data.cidade;
              }); 
        }
    }
});

Answer 1

I solved the problem by taking away everything that refers to this tool that I am doing with the canvas of the object of the registration element and created a component to work only with what refers to the canvas.