Question: use different data model for grid

I would like to use product information in my grid. Is it possible to use these array values? The row would be used for the y value and the column for the x value.

    var products = [
        {
            name: 'Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
            row: 1,
            column: 1,
            width: 1,
            height: 1
        },
        {
            name: 'Integer oudawdawhuadhouwhoudw ahdowhodaw hoadwou',
            row: 1,
            column: 2,
            width: 1,
            height: 1
        }
    ];

If I try to use it like this I get an error.

        <grid-item v-for="item in layout"
                   :x="item.row"
                   :y="item.column"
                   :w="item.width"
                   :h="item.height"
                   :i="item.name">
            {{item.i}}
        </grid-item>

This is the error: [Vue warn]: Error in nextTick: "Error: VueGridLayout: Layout[0].x must be a number!"

[TomFranssen]

It makes sense. I will try to implement something similar. Thanks for the explanation.

[anilkumar-boyka]

Here is an example i was getting data from server like this layout = [{“name”:1,config : {“x”:0,“y”:0,“i”:2,“h”:3,“w”,3}}]

And in my grid layout i was mapping data in this way <grid-item v-for="(item, i) in layout" :key="i" :x="item.config.x" :y="item.config.y" :w="item.config.w" :h="item.config.h" :i="item.config.i" > {{item.config.i}} </grid-item>`

above code giving me this error - [Vue warn]: Error in nextTick: “Error: VueGridLayout: Layout[0].x must be a number!”

so i made my layout element like this var layout = [{"x":0,"y":0,"i":2,"h":3,"w",3}];

<grid-item v-for="(item, i) in layout"

    `:key="i"`
   
    :x="item.x"
    :y="item.y"
    :w="item.w"
    :h="item.h"
    :i="item.i"
  >

{{item.i}} </grid-item> `` here only one root/parent object is there it solved my problem