I am facing a situation where I have two functions associated with the Vue object named "form":
form.sizeChartAsImage();
form.setSizeChart();
The code for these functions is as follows:
setSizeChart: function () {
for (i = 0; i < this.columns.length; i++) {
this.product.size_chart.push({
position_x: 0,
position_y: i,
value: this.columns[i],
})
for (j = 0; j < this.data.length; j++) {
for (var key in this.data[j]) {
if(key === this.columns[i]) {
this.product.size_chart.push({
position_x: j+1,
position_y: i,
value: this.data[j][key],
})
}
}
}
}
}
sizeChartAsImage: function() {
html2canvas($("#size-chart").get(0)).then(canvas => {
canvas.toBlob (blob => {
var sizechartImg = document.createElement('img');
url = URL.createObjectURL(blob);
sizechartImg.src = url;
this.product.size_chart_image = sizechartImg;
debugger;
}, 'image/png');
})
}
However, there seems to be an issue where the second function gets executed first (debugger enters first), and then the form is submitted. Subsequently, sizeChartAsImage() runs last, resulting in no effect as the form was submitted with "size_chart_image" being null.
I am attempting to render the following, which successfully generates the image:
<demo-grid
:data="data"
:columns="columns"
id="size-chart">
</demo-grid>
Could this problem be due to it being a Vue component? Are there potential performance issues at play here? Or should I consider using a callback mechanism?