I 've managed to build component draft which has CANVAS where I draw images from array.
When I set my array in wwconfig as default value → images appear on canvas and component works.
When I bind the same array to my component in editor - it doesn’t work.
I assume i did some bug in my config file coz component script works if its default value and doesn’t work if I bind it.
Can you please look whats wrong here?
Hi @Anna.fae,
can you send me the data you are binding? Are they the same?
One difference on your usecase may be that the array is empty, then populated when you bind the formula (or when your collection is fetch if your formula depends on a collection).
Is your component reacting to a change of the inputArray value 
?
Thank you for the answer.
Here is my array in WeWeb variable which not works:
Here is array if its default value which works :
And here is my code:
<template>
<div class="my-element">
<p :style="textStyle">I am a custom element !</p>
<canvas ref="canvas" width="800" height="800" style="border:1px solid #d3d3d3;">
</canvas>
</div>
</template>
<script>
import { computed, ref } from 'vue';
export default {
props: {
content: { type: Object, required: true },
uid: {type: Object, required: true}
},
data() {
return {
images: this.content.inputArray,
// canvas: null,
// ctx: null
};
},
mounted() {
this.drawImages(this.images);
},
methods: {
async drawImages(images) {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext("2d");
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw images
for (let i = 0; i < images.length; i++) {
const image = new Image();
image.crossOrigin = "anonymous"; // Set crossOrigin to "anonymous"
image.src = images[i].src;
image.onload = () => {
const { x, y, width, height } = images[i];
ctx.drawImage(image, x, y, width, height);
};
}
},
},
}
</script>
<style lang="scss" scoped>
.my-element {
p {
font-size: 18px;
}
}
</style>
This code works if I use default value for “inputArray” and doesnt work if I bind var
Hi @Anna.fae,
as i guessed, your code does not react to variable change
<template>
<div class="my-element">
<p :style="textStyle">I am a custom element !</p>
<canvas ref="canvas" width="800" height="800" style="border:1px solid #d3d3d3;">
</canvas>
</div>
</template>
<script>
import { computed, ref } from 'vue';
export default {
computed: {
images() { return this.content.inputArray } // here you can also check that the data are valid or you can do it on the drawImages method
},
watch: {
images() {
this.drawImages(this.images);
}
}
},
Hope this help, let me know if you need more explanations
Amazing, now it works! thanx!