Vue-grid-layout: Remove item which clicked an "X" button inside of it

[spider58]

Hello. I've got 5 items (i can dynamically ad new items) and i put a remove button inside of them. I want to remove item which clicked remove button inside of it. But always last item is being removed when i click a remove button.

here is my code.

<button @click="addItem">Add an item</button>
            <grid-layout :layout="layout"
                         :col-num="12"
                         :row-height="30"
                         :is-draggable="draggable"
                         :is-resizable="resizable"
                         :vertical-compact="true"
                         :use-css-transforms="true"
            >
                <grid-item v-for="item in layout"
                           :x="item.x"
                           :y="item.y"
                           :w="item.w"
                           :h="item.h"
                           :i="item.i"
                            drag-allow-from=".window-header"
                            drag-ignore-from=".no-drag"
                        >
                    <div class="window">
                        <div class="window-header">Harita</div>
                        {{item.i}}
                    <button @click="removeItem">remove</button>
                    </div>
                </grid-item>
            </grid-layout>

this is code

`addItem: function() {

        var self = this;

        //console.log("### LENGTH: " + this.layout.length);

        var item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};

        this.index++;

        this.layout.push(item);

    },

removeItem: function(item) {

        console.log(item);

        //console.log("### REMOVE " + item.i);

        this.layout.splice(this.layout.indexOf(item), 1);

    },

`

[chrishamm]

I spent the past few days trying to come up with a similar solution by creating my own parent GridContainer component that renders the GridLayout and its GridItem children dynamically from the items in the default slot. However it seems like the placeholder GridItem, which is always created by the GridLayout, causes rendering issues when I delete an item that is not the last one. My best guess is that VueJS fails to merge the programatically-created GridItems with the placeholder when it tries to patch.

I'd like to verify this by recompiling vue-grid-layout without the placeholder item but I cannot compile it because of these error messages:
1) error in ./src/helpers/DOM.js

Module parse failed: Unexpected token (1:14)
You may need an appropriate loader to handle this file type.

let currentDir: "ltr" | "rtl" | "auto" = "auto";
2) error in ./src/helpers/utils.js

Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type.
| // @flow

export type LayoutItemRequired = {w: number, h: number, x: number, y: number, i: string};
3) error in ./src/helpers/responsiveUtils.js

Module parse failed: Unexpected token (5:12)
You may need an appropriate loader to handle this file type.
| import {cloneLayout, compact, correctBounds} from './utils';

Any ideas?

Edit: I've got a derived component working by using the "key" property in the data object of the createElement function. Just make sure it remains unique even after deleting options, else you will get rendering issues.

[chrishamm]

@spider58 I figured out why this did not work on my setup. You have to assign a static key to each grid-item, then it will work. You don't seem to assign one at all anyway.

[dsalaj]

@chrishamm Please link to your solution or post a minimal example with this. This way others can more easily use it and it has a higher chance of being integrated into the repository. Thanks!

[chrishamm]

See https://github.com/chrishamm/vue-dynamic-grid and https://chrishamm.io/grid-demo/ I stopped using it though because the whole thing appears to be relatively slow (vue-grid-layout seems to be using absolute coordinates and a resize listener). IMHO there should be a better solution in the long term.

[blognat]

I think it is necessary to close issue. I had the same problem. I deleted the element in array by the button and could not understand the problem, as the last element was always deleted, although the key was unique. I added an extra unique uuid and it all worked.

<dish-item v-else class="dishItem" 
  v-for="(item, key) in dishes" :key="key + $uuid.v1()" :value="item"
  @removeDish="$delete(dishes, key)" 
  @editDish="$refs.modal.showEdit({item, key})"
/>