Vue-Draggable 在 b-modal 上不能正常工作

Question

我在开发 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'
        }
      },
    }
  },
...

'''

它第一次运行完美，但是在我 close/hide b-modal 并重新打开它之后，当我尝试移动列表项时它开始给我这样的错误：

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 来控制我的列表，但它不起作用。

Answer 1

我相信这是因为 <b-modal> 默认情况下是惰性的，这可能会在安装一次后混淆 vuedraggable。

您可以通过将 static 属性添加到模态来关闭模态的延迟加载。 <b-modal static>

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

Vue-Draggable 在 b-modal 上不能正常工作

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

vue.js

bootstrap-vue

vuedraggable