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