Vue-Draggable在b-modal上无法正常工作

编程问答 2022-08-14

问题描述

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

解决方法

我相信这是因为<b-modal>在默认情况下是惰性的，在挂载一次后可能会使vuedraggable感到困惑。

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

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

bootstrap-vuevue.jsvuedraggable