Draggable vue components

While replicating:

https://sortablejs.github.io/Vue.Draggable/#/nested-example

(code)

I ran into an issue related to the model; how can I add draggable to vue components instead of a raw json (as used in the example).

What I want to do is, add drag and drop to:

https://codesandbox.io/s/gg1en

(each item can be moved ("dragged") from one group to another, each group can be dragged from a lower position to an upper one (and vice-versa).

I tried:

https://codesandbox.io/s/quirky-sutherland-5s2zz?file=/src/components/InventorySectionC.vue

and get:

Unexpected mutation of "itemSectionData" prop. (vue/no-mutating-props)

but in this case the data comes from (through?) a prop.

The hierarchy of components is:

ChromePage –> InventorySectionC –> InventorySectionGroupC –> InventorySectionGroupItemC

I need components instead of plain JSON as each component has additional features (e.g. CRUD).

How should I go about combining components with draggable?

Source: Ask Javascript Questions

LEAVE A COMMENT