Vue-Draggable doesn't work properly on b-modal

Question

I just met a problem when developing a vue.js app. I'm trying to implement a draggable list in a vue-bootstrap modal. These are my code:

'''

<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'
        }
      },
    }
  },
...

'''

It runs perfectly for the first time, but after I close/hide the b-modal and reopen it, it starts giving me errors like this when I try to move the list items:

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

I've tried using Vuex to control my list, but it doesn't work.

Answer 1

I believe this is happening because <b-modal> is lazy by default, which might confuse vuedraggable after having been mounted once.

You can turn off lazy loading of the modal by adding the static prop to your modal. <b-modal static>

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