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!
Hello Anna, I need a little help in developing a custom weweb component.
I am new to weweb and i have very little deadline to complete this task. I just want to know the process little bit for adding my component as expected.
Bascially i have to create a custom accordion type component. In which user can add multiple cards and some configurations. In each card user will be able to set:
It will contain 2 columns one column will have image and the second column will have the accordion items and whatever item user will open in accordion the relevant image will be displayed in the first column. If you visit aritable.com then you can check it out and i am building exactly same. I shared the screenshot
So, my question is while creating a weweb component there are 2 options:
Which option suits best in my case and how to set the properties for each item of accordion. We have to set dynamic properties in an array. I can set all other general properties but not sure how dynamic array will work. If you can share your knowledge with me then it will be much appreciated. Thanks
