Can't render custom components

[OwenMelbz]

Hi,

I'm having a strange problem, by where if I try to pass in a component I get the console error

[Vue warn]: Invalid prop: type check failed for prop "component". Expected String with value "[object Object]", got Object 

I'm just importing my component, then passing it in e.g.

import { YourPoliciesCard } from '@/components'

layouts: {
            xs: [
                // row 1
                { x: 0, y: 0, w: 1, h: 1, i: '0', component: YourPoliciesCard },
                { x: 0, y: 1, w: 1, h: 1, i: '1', component: YourPoliciesCard },
                { x: 0, y: 2, w: 1, h: 1, i: '2', component: YourPoliciesCard },
                // row 2
                { x: 0, y: 3, w: 1, h: 1, i: '3', component: YourPoliciesCard },
                { x: 0, y: 4, w: 1, h: 1, i: '4', component: YourPoliciesCard },
                { x: 0, y: 5, w: 1, h: 1, i: '5', component: YourPoliciesCard },
                { x: 0, y: 6, w: 1, h: 1, i: '6', component: YourPoliciesCard },
                { x: 0, y: 7, w: 1, h: 1, i: '7', component: YourPoliciesCard },
            ],
}

Then in the template it pulls it in

<template slot-scope="props">
            <VueGridItem
                v-for="item in props.layout"
                :key="item.i"
                :i="item.i"
                :w.sync="item.w"
                :h.sync="item.h"
                :x="item.x"
                :y="item.y"
                :component="item.component"
                :container-width="props.containerWidth"
                :is-draggable="true"
                class-name="grid-item"
                :cols="props.cols"
                :height-from-children="true"
            >
                <div>
                    {{ labels[item.i] }}
                </div>
            </VueGridItem>
        </template>

--

I've created a codesandbox of the problem so the problem is replicable -> https://codesandbox.io/s/mz51pyymj?fontsize=14

If you run that you will see the labels displaying, however if you view the developer console you will see its erroring and preventing the loading of the custom components.

Please could you advise how to resolve this, I'm using version 1.1.6.

Thanks :)

[lrembacz]

Yes, you were right about this bug. I have fixed it up, update your version!

Anyway you woldn't be able to get component from layouts object because it will be actually replaced with build in layout structure. As you can see in types: https://github.com/lrembacz/vue-responsive-grid-layout/blob/master/types/lib/utils.d.ts.

LayoutItem structure is as follow:

interface LayoutItem {
    w: number;
    h: number;
    x: number;
    y: number;
    i: string;
    minW?: number;
    minH?: number;
    maxW?: number;
    maxH?: number;
    moved?: boolean;
    immobile?: boolean;
    isDraggable?: boolean;
    isResizable?: boolean;
}

So there is no possibility to pass any other property in there.

You can change your code for something like this: https://codesandbox.io/s/10r1x3vlp4

Thanks!

// BTW: There is only possibility to use custom component passed via :component props or component inside of gridItem. Two solutions at once won't work actually.

[OwenMelbz]

Thanks for the reply :)

I checked out the updated codesandbox - however I don’t know if it’s just me, but I can’t see the custom component rendering. It just shows the divs with a label.

(The labels are just there to help debug the grid layout)

[lrembacz]

@OwenMelbz Yes I can see that. It wasn't saved successfully. Here it is saved already. https://codesandbox.io/s/v1ykq4nvr0

You can just use array of components with the matching i property of item. :component="getComponentByItemId(item.i)"

[OwenMelbz]

Ah lovely, thank you :)

I’ll check this out properly when I get to work and see how we go!

Thanks for your help, much appreciated :)

[lrembacz]

Okey. I close it for now.

[OwenMelbz]

Managed to get it working :)

We've simplified it a little bit by using named components rather than mapping indexes

https://codesandbox.io/s/20xw5o2nz0?fontsize=14