v-for on `fabric-canvas` component breaks the structure

[smilburn1990]

Hello,

First of all thanks for making this, it is really handy.

My problem seems to occur when I loop through and generate canvas. When I put fabric-canvas inside a component, and generate multiple based on a v-for - it seems to embed the new canvas-container inside the last one generated.

So this is loop 1

Loop 2

Am I missing anything or is it the way it is built?

Thanks again!

[bensladden]

Hi did you create unique ids?
Can you show your source code?

[smilburn1990]

So it might be worth mentioning I am using NUXT...

Component (BannerFrame.vue)

<template>
  <div class="banner-frame">
    <fabric-canvas
      :height="frameSize.height"
      :width="frameSize.width"
      backgroundColor="#ff8005"
    >
      <fabric-text
        v-for="(item, i) in textItems"
        :id="`text-${i}`"
        :key="`text-${i}`"
        fontFamily="Poppins"
        fontStyle="bold"
        :text="item.value"
      />
      <fabric-image
        v-for="(item, i) in imageItems"
        :id="`image-${i}`"
        :key="`image-${i}`"
        :url="item.value"
      />
    </fabric-canvas>
  </div>
</template>

Parent (pages/index.vue)

    <banner-frame
      v-for="(size, i) in sizes"
      :key="`frame-${i}`"
      :banner-size="size"
      :frames="content"
    />

As you can see, I have added the unique Id's so I am not sure why the issue is happening. Is there a solution online where it is looped?

[smilburn1990]

@bensladden - I see what you mean now. I added the unique ID to the parent and it works now. I have some other issues though so I will open a new question.

Thanks,