Help to bind array to component input var [Resolved]

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 :slight_smile: ?

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

  • Move the images data to a computed, so that your data is always up to date
  • Add a watch to your images after mount, so that your canvas is always synchronise with your data
<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 :slight_smile:

2 Likes

Amazing, now it works! thanx!