Error: Invalid parameter layoutItem id passed

[tomvanvegchel]

I am migrating my vue 2 grid-layout to your vue 3 approach however I keep getting the following error: Error: Invalid parameter layoutItem id passed

I decided to copy one of your examples in hopes of trying to debug this however I am getting the same exact error using this minimal example:

<GridLayout
    ref="refLayout"
    v-model:layout="testLayout"
>
    <GridItem
        v-for="item in testLayout"
        :key="item.i"
        class="test"
        :h="item.h"
        :i="item.i"
        :w="item.w"
        :x="item.x"
        :y="item.y"
        :min-h="item.minH"
        :min-w="item.minW"
    >
        <span class="text">
          {{ item.i }}
        </span>
    </GridItem>
</GridLayout>

I noticed in the vue devtools that theres always one vue-grid-placeholder added with an i of -1.

Your getLayoutItem method has the following check:

if (id === undefined || id === null || id.toString().trim().length === 0 || parseInt(id.toString()) < 0) {
  throw new Error(ErrorMsg.INVALID_LAYOUT_ITEM_ID);
}

Is this causing issues? Or am I doing something wrong. I am quite lost as I've narrowed it down to this minimal example and still can't seem to solve it.

Would love to have some input on this, thanks.

[gwinnem]

Hi Tom. I will check this, this weekend and get back to you. Pls send me the layout definition you are using when building the grid.

Regards Geirr

On Tue, 11 Nov 2025 at 08:38, Tom van Vegchel @.***> wrote:

tomvanvegchel created an issue (gwinnem/vue-responsive-grid-layout#65) https://github.com/gwinnem/vue-responsive-grid-layout/issues/65

I am migrating my vue 2 grid-layout to your vue 3 approach however I keep getting the following error: Error: Invalid parameter layoutItem id passed

I decided to copy one of your examples in hopes of trying to debug this however I am getting the same exact error using this minimal example:

<GridLayout ref="refLayout" v-model:layout="testLayout"

<GridItem
    v-for="item in testLayout"
    :key="item.i"
    class="test"
    :h="item.h"
    :i="item.i"
    :w="item.w"
    :x="item.x"
    :y="item.y"
    :min-h="item.minH"
    :min-w="item.minW"
>
    <span class="text">
      {{ item.i }}
    </span>
</GridItem>

I noticed in the vue devtools that theres always one vue-grid-placeholder added with an i of -1. image.png (view on web) https://github.com/user-attachments/assets/8141167f-33da-4581-a4ec-ea4be4d1ab86

Your getLayoutItem method has the following check:

if (id === undefined || id === null || id.toString().trim().length === 0 || parseInt(id.toString()) < 0) { throw new Error(ErrorMsg.INVALID_LAYOUT_ITEM_ID); }

Is this causing issues? Or am I doing something wrong. I am quite lost as I've narrowed it down to this minimal example and still can't seem to solve it.

Would love to have some input on this, thanks.

— Reply to this email directly, view it on GitHub https://github.com/gwinnem/vue-responsive-grid-layout/issues/65, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABRBD4CJWIQKHQ6IGF4GQVL34GHBDAVCNFSM6AAAAACLXYONXOVHI2DSMVQWIX3LMV43ASLTON2WKOZTGYYTCMBYGYYTMNY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[tomvanvegchel]

Hi @gwinnem,

In the example as posted above I used the testLayout same as used in your examples. I just copied it, so if you use that same testLayout you should be able to reproduce it

[eboye]

Hi,

I'm having the same issue ... everything is working, but the error is very annoying. If you need anything to test from my side, please do not hesitate.

[eboye]

The bug is this line

https://github.com/gwinnem/vue-responsive-grid-layout/blob/8ec736f793ee6b9a68bce43beae0c26a2e96268c/src/components/Grid/GridLayout.vue#L144-L150

Line 146

I'm not sure, but it should be some random string or something, or huge positive integer that will never be generated otherwise