Using example 9 in vue3

[xiaolannuoyi]

Example09DynamicAddRemove.vue

"vue": "^3.0.0",
"vue-grid-layout": "^3.0.0-beta1",

[myWsq]

I had the same problem. It seems that adding new elements does not trigger the update layout method correctly.

Here's a workaround that forces the layout to be updated by dispatching a window resize event. This is not very elegant but does work.

        addItem: function () {Gustavo Santos, 5 months ago: • website base version
            // Add a new item. It must have a unique key!
            this.layout.push({
                x: (this.layout.length * 2) % (this.colNum || 12),
                y: this.layout.length + (this.colNum || 12), // puts it at the bottom
                w: 2,
                h: 2,
                i: this.index,
            });
            // Increment the counter to ensure key is always unique.
            this.index++;
+           window.dispatchEvent(new Event("resize"));  // dispatch window resize event to force update layout
        }

[Aikaxiya]

y: this.layout.length + (this.colNum || 12),
这行代码难道没有人发现有问题吗？

[huhai122]

Using example 10 in vue3
how to use it

[havenothingtosay]

y: this.layout.length + (this.colNum || 12), 这行代码难道没有人发现有问题吗？

我理解是，这行代码赋值y在最下方，通过组件的verticalCompact=true属性，让他自己垂直压缩调整到贴近上方的元素，但是在vue3中，垂直压缩功能有问题，要拖动一下元素才会触发垂直压缩，这个问题在https://github.com/jbaysolutions/vue-grid-layout/issues/784也有人提了