Question

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

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

通过单击“文本框”3次，将3个文本框添加到表单中。
通过将鼠标悬停在上方并点击垃圾桶来删除顶部文本框。

从上到下删除它们工作正常（看起来似乎）。最新元素位于顶部，因为gridstack将其添加到顶部。所以这是数组中的最后一个元素。

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

Gridstack在页面上变得混乱和交换元素。我不知道为什么会这样做。有人可以帮我解决这个问题吗？几周来我一直在四处寻找尝试这么多不同的事情。

我添加了一些控制台日志记录来显示正在引用的id。当你按照添加的最后一个元素的顺序删除元素时，“destroyed”方法中的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);
  }
});

当vue.js删除节点

0 个答案: