Struggling with displaying Vue components that contain a canvas with different behaviors.
Looking to switch components using v-if and passing different properties.
Here's a small example:
Currently, when switching from 'blue' to 'red', the color remains 'red' in the drawing even though the DOM shows the switch to 'canvas2.'
--- COMPONENT ---
<template>
<div class="container-fluid">
<canvas style="border: 1px solid black;" width="300px" height="150px" :id="'canvas'+canvasKey"></canvas>
</div>
</template>
export default {
data: function() {
return {}
},
mounted: function() {
this.draw_canvas();
},
created: function() {},
watch: {},
props: ['canvasKey'],
computed: {},
methods: {
draw_canvas: function() {
var app = this;
var c = document.getElementById("canvas"+this.canvasKey);
var ctx = c.getContext("2d");
if(this.canvasKey == 1) {
var color = 'red';
} else if(this.canvasKey == 2) {
var color = 'blue';
}
var mousePos = function(mouseEv) {
let offset = $("#canvas"+app.canvasKey).offset();
let pos = {
x: mouseEv.pageX - offset.left,
y: mouseEv.pageY - offset.top,
};
return pos;
}
$('#canvas'+this.canvasKey).on('mousemove' , function(ev) {
var pos = mousePos(ev);
ctx.beginPath();
ctx.arc(pos.x, pos.y, 10, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
});
}
}
}
--- CREATE COMPONENT ---
<canvas-test v-if="color == 'red'" canvasKey="1"></canvastest>
<canvas-test v-if="color == 'blue'" canvasKey="2"></canvas-test>
I hope my question is clear. Any assistance would be greatly appreciated. Thank you in advance!