Extracting GridItem into its own .vue file lost the auto-added styles

[Paul-Kijtapart]

Versions "vue": "^2.3.3", "vue-grid-layout": "^2.1.6"

I tests the following codes with 2 items: var layout = [ { x : 0, y : 0, w : 6, h : 6 }, { x : 6, y : 0, w : 6, h : 6 } ] which is binds to data

Originally, I have the following code

// File 'app.vue'
<template>
    <div id="app">
        <grid-layout
                v-bind:layout="layout"
                v-bind:col-num="12"
                v-bind:row-height="31"
                v-bind:margin="[10, 10]"
                :vertical-compact="true"
                :use-css-transforms="true"
                :is-draggable="false"
                :is-resizable="false"
        >
            <grid-item
                    v-for="(item, index) in layout"
                    :key="item.i"
                    :x="item.x"
                    :y="item.y"
                    :w="item.w"
                    :h="item.h"
                    :i="item.i"
            >
                <p> Item : {{ item }}</p>
            </grid-item>
        </grid-layout>
    </div>
</template>

<script> ...same as that from the sample code basic 1... </script>

The above code works perfectly. = the 2 items got displayed side by side.

However, when I want to separate the logic by extracting/extending grid-item into another component (another .vue file) Changes made: 'grid-item' => 'custom-item' ( custom-item will be a wrapper for grid-item for me to add extra functionalities )

Codes after changes:

// File (1)  'app.vue'
<template>
    <div id="app">
        <grid-layout
                v-bind:layout="layout"
                v-bind:col-num="12"
                v-bind:row-height="31"
                v-bind:margin="[10, 10]"
                :vertical-compact="true"
                :use-css-transforms="true"
                :is-draggable="false"
                :is-resizable="false"
        >
            <custom-item
                    v-for="(item, index) in layout"
                    :key="item.i"
                    :item="item"
            >
            </custom-item>
        </grid-layout>
    </div>
</template>

<script> 
 // External Libraries
    import VueGridLayout from 'vue-grid-layout';

    // Components
    import CustomItem from './components/custom_item.vue';

    export default {
           ...Original data..,

           // Added custom item component here
           components: {
            CustomItem,
        }
    };

</script>

// File (2) 'custom_item.vue'

 <template>
    <grid-item
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            class="cool light"
    >
        <p> Item : {{ item }}</p>
    </grid-item>
</template>

<script>
    // External Libraries
    import VueGridLayout from 'vue-grid-layout';

    // Components
    let GridItem = VueGridLayout.GridItem;

    export default {
        props: [
            'item'
        ],
        created: function () {
            console.log('Item props is ');
            console.log(this.item);
        },
        components: {
            "GridItem": GridItem
        }
    };
</script>

Effect:

• data is displayed correctly, but the layout is wrong.

• 2 items are still displayed on the screen, but they are now Overlapping. its width span (100%)

• When I check the DOM element, I notice that some styles got removed.

Could you help check why the styles got removed?

[gmsa]

GridItem.vue has its own styles, thats probably why they got removed.

Anyway, I don't think what you're doing is a good idea. GridLayout and GridItem should be working together. If you need your own components on the grid, just add them inside :

<template>
    <div id="app">
        <grid-layout
                v-bind:layout="layout"
                v-bind:col-num="12"
                v-bind:row-height="31"
                v-bind:margin="[10, 10]"
                :vertical-compact="true"
                :use-css-transforms="true"
                :is-draggable="false"
                :is-resizable="false"
        >
            <grid-item v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i">
                <custom-item></custom-item>
            </grid-item>
        </grid-layout>
    </div>
</template>