Vue model binding does not work at removeWidget()

[GeniusWiki]

I use Vue and gridstack. The widgets(i.e, Vue components) rendered by an array from vue.$data.widgets. When adding a widget, I call grid.addWidget() at Vue component mounted event. It is works.

However, I cannot figure out at good place to call grid.removeWidget(). Basically, if call vue.$data.widgets.splice(idx,1), vue will automatically reflects to UI - that gridstack widget is deleted but it leaves a blank area at deleted widget place. I think grid.removeWidget() needs to called somewhere. I tried "destroyed" or "beforeDestroy" event in that vue component. But gridstack reports error in removeWidget() - the node is undefined at subsequence removeNode() method.

I also try to call removeWidget() before vue updates $data.widgets.splice(), that will cause vue exception.

So, is it possible refresh the widgets layout rather than by removeWidget()/addWidget()?

[radiolips]

If I'm understanding you correctly, you may want to try using a parameter when calling removeWidget.

https://github.com/troolee/gridstack.js/tree/master/doc#removewidgetel-detachnode

Try passing in false as the second parameter so that the node is not detached.

[phainv]

Hi. I also use Vue.js. But i can't import girdstack from node_modules. Can you help me?

[radiolips]

Closing for inactivity. Please reopen if you're still having a problem.