search

SortableJS / vue.draggable.next

Vue 3 compatible drag-and-drop component based on Sortable.js
https://sortablejs.github.io/vue.draggable.next/#/simple
MIT License
3.91k stars 531 forks source link

'Cannot read property 'option' of undefined' error with draggable list initialization #33

Open n-skriabin opened 3 years ago

n-skriabin commented 3 years ago

The following error appears when initializing the draggable list. 'Cannot read property 'option' of undefined'.

(You can see in the following screenshot) error_scrn

code_scrn After debugging, I found that the watcher is triggered before the mounted method, thus _sortable in 'mounted' is undefined.

Is it possible to fix this somehow? Thank you.

PuiwahWai commented 3 years ago

The bug occurs frequently!!!

alessandroAmedei commented 1 year ago

image I get similar issue.. I am using "quasar": "^2.6.0", "vue": "^3.0.0", "vuedraggable": "^4.1.0"

and a simple code

<Draggable v-model="state.destinations" 
                     @start="state.isDragging = true"
                     @end="state.isDragging = false"
                     item-key="id"/>
...
</Draggable>
...
<script setup>
import Draggable from 'vuedraggable'
SaravananRamanathan commented 1 year ago

I stumbled across this problem

The solution that worked for me: vuedraggable is based on Sortable.js we are supposed to embed sortable.js before vuedraggable like this:

<script src="{% static "global/sortablejs-1.8.4/Sortable.min.js" %}"></script>
<script src="{% static "global/Vue.Draggable/2.20.0/vuedraggable.umd.min.js" %}"></script>

In my case i forgot to use this: <script src="{% static "global/sortablejs-1.8.4/Sortable.min.js" %}"></script>, once I did everything worked perfectly.