why I can't create one layer for too or more shapes using vue-konva?

287 Views Asked by At

I have a problem with vue-konva, I can't create too many shapes in the same layer for example :

<template>
    <v-stage :config = "stage">
        <v-layer>
            <v-circle :config = "circle1"
            />
        </v-layer>
        <v-layer>
            <v-circle :config = "circle2"
            />
        </v-layer>
    </v-stage>
</template>

in the result i got the first shape and errors :

vue.common.dev.js:630 [Vue warn]: Error in mounted hook: "TypeError: parentKonvaNode.add is not a function"
found in
---> <VArrow>
       <VCircle>... (1 recursive calls)
         <VLayer>
           <Edge>
             <VStage>
               <Anonymous>
                 <Root>
2

There are 2 best solutions below

3
On

There is no layer component in vue-konva. You have to use v-layer:

<v-stage :config = "stage">
        <v-layer>
            <v-circle :config = "{radius: 10, fill: 'blue'}"/>
        </v-layer>
        <v-layer>
            <v-circle :config = "{radius: 10, fill: 'blue'}"/>
        </v-layer>
</v-stage>
0
On

yes my bad it was v-layer it was a mistake when i rewrote it here, sorry. I used v-layer and it didn't get the expected result it only shows the first shape and get errors.