Currently, I am in need of assistance with utilizing "Vue.Draggable". For the past two days, I have been struggling to properly update the draggable array.
The main challenge lies in:
- Updating the draggable array using computed set/get functions
- Obtaining draggable item properties, such as information about parent items, and invoking an axios function to update data in a MySQL database
Here is a sample of the data structure:
{ cat1: { authors: [ { name: "Name 1" }, { name: "Name 2" } ] }, cat2: { authors: [ { name: "Name 3" }, { name: "Name 4" } ] } }
The code for rendering:
<div v-for="(category, index) in categories">
<draggable v-bind:id="index" v-model="category.authors" :options="{group:'authorslist', draggable:'.author'}" class="draggable-row" >
<div v-for="author in category.authors" :key="author.id" class="author" >
My objective is to:
Although the mentioned setup appears to be functioning correctly visually, VueX throws an error regarding the mutation process.
[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers." Error: [vuex] Do not mutate vuex store state outside mutation handlers.
Replacing v-model with :value resolves the issue but disables drag and drop functionality entirely.
I have attempted various approaches... One suggestion was to create a computed property for "categories" and implement "get/set" functions to trigger actions->mutations. However, the setback here is that the categories->set function fails to work when altering the structure of the authors array.
Another obstacle is enabling drag and drop functionality for moving an author between
categories</code, while also obtaining the author and category IDs to utilize in an <code>AxiosI experimented with the @end event, yet it solely affects the sorting process and not dragging and dropping between parent elements (categories).
Your assistance would be greatly appreciated!