5

我正在尝试设置 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。当您按照添加的最后一个元素的顺序删除元素时，“destroyed”方法中的 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);
  }
});
4

0 回答 0