Vue-grid-layout: wrap different components in grid-item

[dolare]

Hi,

Is any possible to wrap different components in grid-item?

For example:
<grid-layout> <grid-item> <A></A> </grid-item> <grid-item> <B></B> </grid-item> </grid-layout>

Thanks.

[ikbelkirasan]

Here is how I do it:

<grid-layout :layout="layout">
  <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
    <component :is="item.is" v-bind="item.props"></component>
  </grid-item>
</grid-layout>

And the layout should look something like this:

import MyCustomComponent1 from './MyCustomComponent1'
import MyCustomComponent2 from './MyCustomComponent2'

export default {
  components: {
    MyCustomComponent1,
    MyCustomComponent2,
  },
  data() {
    return {
      layout: [
        {is: 'my-custom-component1', i: 'comp1', x: 0, y: 0, h: 1, w: 12, props: {custom_prop: 'c1'}},
        {is: 'my-custom-component2', i: 'comp2', x: 0, y: 4, h: 1, w: 12, props: {custom_prop: 'c2'}},
        //...
      ]
    }
  }
}