Vue-Draggable не работает должным образом в b-модальном режиме

Я только что столкнулся с проблемой при разработке приложения vue.js. Я пытаюсь реализовать перетаскиваемый список в модальном vue-bootstrap. Это мой код:

'''

<b-modal
  id="modal--layers"
  title="layers"
  body-class="d-flex flex-wrap justify-content-around"
  centered
  hide-footer
  @hidden="onLayerControlHidden"
>
  <div class="col-6">
    <h3>Transition</h3>
    <draggable
      tag="transition-group"
      :component-data="componentData"
      :list="list"
      class="list-group"
      draggable=".item"
      :animation="100"
      @start="dragging = true"
      @end="dragging = false"
    >
      <div
        v-for="element in list"
        :key="element.name"
        class="list-group-item item"
      >
        {{ element.name }}
      </div>
    </Draggable>
  </div>
  <div class="col-3">
    {{ list }}
  </div>
</b-modal>

'''

'''

export default {
  name: 'DesignerPanel',
  display: 'Transition',
  components: {
    Draggable
  },

  mixins: [
    SelectedSkuMixin,
    EventsMixin,
    SaveDesignMixin
  ],

  data () {
    return {
      list: [
        { name: 'John', id: 0 },
        { name: 'Joao', id: 1 },
        { name: 'Jean', id: 2 }
      ],
      dragging: false,
      componentData: {
        props: {
          type: 'transition',
          name: 'flip-list'
        }
      },
    }
  },
...

'''

Он работает отлично в первый раз, но после того, как я закрою / скрою b-модальное окно и снова его открою, он начинает выдавать такие ошибки, когда я пытаюсь переместить элементы списка:

vuedraggable.common.js?310e:2340 Uncaught TypeError: Cannot read property 'element' of null
    at VueComponent.onDragStart (vuedraggable.common.js?310e:2340)
    at Sortable.eval (vuedraggable.common.js?310e:1979)
    at dispatchEvent (sortable.esm.js?aa47:916)
    at _dispatchEvent (sortable.esm.js?aa47:961)
    at Sortable._dragStarted (sortable.esm.js?aa47:1570)
onDragStart @ vuedraggable.common.js?310e:2340
eval @ vuedraggable.common.js?310e:1979
dispatchEvent @ sortable.esm.js?aa47:916
_dispatchEvent @ sortable.esm.js?aa47:961
_dragStarted @ sortable.esm.js?aa47:1570
setTimeout (async)
_nextTick @ sortable.esm.js?aa47:2597
_onDragStart @ sortable.esm.js?aa47:1792
vuedraggable.common.js?310e:2384 Uncaught TypeError: Cannot read property 'index' of null
    at VueComponent.onDragUpdate (vuedraggable.common.js?310e:2384)
    at Sortable.eval (vuedraggable.common.js?310e:1979)
    at dispatchEvent (sortable.esm.js?aa47:916)
    at _dispatchEvent (sortable.esm.js?aa47:961)
    at Sortable._onDrop (sortable.esm.js?aa47:2216)
    at Sortable.handleEvent (sortable.esm.js?aa47:2269)
onDragUpdate @ vuedraggable.common.js?310e:2384
eval @ vuedraggable.common.js?310e:1979
dispatchEvent @ sortable.esm.js?aa47:916
_dispatchEvent @ sortable.esm.js?aa47:961
_onDrop @ sortable.esm.js?aa47:2216
handleEvent @ sortable.esm.js?aa47:2269

Я пробовал использовать Vuex для управления своим списком, но это не сработало.


vue.js vuedraggable bootstrap-vue
person Tianyuan Zhang    schedule 27.08.2020    source источник
comment
Кто-нибудь когда-нибудь сталкивался с такой же проблемой? Я застрял здесь несколько дней, буду признателен за вашу помощь! Кстати, не беспокойтесь о миксинах, в данном случае это не имеет никакого отношения   -  person Tianyuan Zhang    schedule 27.08.2020
comment
Постарайтесь сократить свой код до только соответствующих частей. Если вы оставите это так, чтение кода будет трудоемким.   -  person Philip F.    schedule 28.08.2020
comment
@PhilipF. Извините за это, но я подумал, что это вызвано vuedraggable, поэтому я опубликовал весь код, связанный с vuedraggable   -  person Tianyuan Zhang    schedule 28.08.2020

Ответы (1)


arrow_upward
1
arrow_downward

Я считаю, что это происходит из-за того, что <b-modal> по умолчанию ленив, что может сбить с толку vuedraggable после однократного монтирования.

Вы можете отключить отложенную загрузку модального окна, добавив опору static в ваш модальный файл. <b-modal static>

https://bootstrap-vue.org/docs/components/modal#lazy-loading-and-static-modals

person Hiws    schedule 27.08.2020
comment
Похоже, он отлично работает после того, как я добавил статику! Большое спасибо! Ваш ответ потрясающий! - person Tianyuan Zhang; 27.08.2020
comment
Если ответ сработал для вас, не стесняйтесь устанавливать его как принятый ответ :) - person Hiws; 28.08.2020