为什么当 vue.js 删除节点时 gridstack.js 会交换我的元素

Question

我正在尝试设置 gridstack.js 以使用我的 vue 组件，就像在这个淘汰赛示例中一样：https : //github.com/troolee/gridstack.js#use-with-knockoutjs/。

这是我所拥有的代码笔：https ://codepen.io/nyoung697/pen/BperoZ

1. 通过单击“文本框”3 次，向表单添加 3 个文本框。
2. 通过将鼠标悬停在顶部并单击垃圾桶来删除顶部文本框。

从上到下删除它们效果很好（看起来如此）。最新的元素在顶部，因为 gridstack 将它添加到顶部。所以这是数组中的最后一个元素。

1. 现在尝试调整文本框的大小并以随机顺序删除它们。

Gridstack 变得混乱并在页面上交换元素。我不知道它为什么这样做。有人可以帮我解决这个问题吗？几个星期以来，我一直在兜圈子，尝试了很多不同的东西。

我添加了一些控制台日志来显示正在引用的 id。当您按照添加的最后一个元素的顺序删除元素时，“销毁”方法中的 id 与所有其他方法/钩子相同。但是，如果您尝试以随机顺序删除它们，则在销毁方法中打印的 id 是不同的。

摧毁：

Vue.component('ntextbox', {
  template: '#textboxtemplate',
  props: ['component'],
  created () {
    console.log('created textbox control');
  },
  methods: {
    removeWidget: function(){
      console.log('child remove: ' + $(this.$el).attr('id'));
      this.$emit('remove');
    }
  },
  destroyed () {
    console.log('textbox control destroyed');
    var grid = $('.grid-stack').data('gridstack');
    console.log(grid);
    console.log($(this.$el).attr('id'));
    grid.removeWidget(this.$el);
    //console.log(grid);
  }
});