vue.js가 노드를 제거할 때 gridstack.js가 내 요소를 스와핑하는 이유

vue.js가 노드를 제거할 때 gridstack.js가 내 요소를 스와핑하는 이유

나는 gridstack.js가 나의 vue 구성 요소와 함께 작동하도록 설정하려고 한다. https://github.com/troolee/gridstack.js#use-with-knockoutjs/.

여기 내가 가지고 있는 것의 코데펜이 있다: https://codepen.io/nyoung697/pen/BperoZ

1. '텍스트박스'를 3번 클릭하여 3개의 텍스트 상자를 양식에 추가하십시오.
2. 맨 위를 맴돌면서 휴지통을 클릭하여 상단 텍스트 상자를 삭제하십시오.

위에서 아래로 삭제하는 것은 효과가 있다.그리드스택이 그것을 상부에 추가하고 있기 때문에, 가장 최근의 요소는 상부에 있다.이것이 배열의 마지막 요소 입니다.

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);
  }
});

참조URL: https://stackoverflow.com/questions/42311359/why-is-gridstack-js-swapping-my-elements-around-when-vue-js-removes-a-node