I'm seeking for a help with "Vue.Draggable". The second day I`m trying to update draggable array correctly.

The challenge is:

• update draggable array using puted set/get functions
• get draggable item properties including information about parent item and call axios function to update data on a MySQL.

Data sample:

{ cat1: { authors: [ { name: "Name 1" }, { name: "Name 2" } ] }, cat2: { authors: [ { name: "Name 3" }, { name: "Name 4" } ] } }

Rendering code:

<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" >

What I'm trying to do:

Actually, mentioned construction works fine. But only visually. VueX gives an error about 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 helps but in this case, D&D is not working even visually.

I have tried a lot of variants... One is - create a puted property for "categories" and use "get/set" functions to call actions->mutations from them. The problem is - categories->set function is not working when we are changing authors array structure.

The second problem is drag and drop author between categories in such a way it allows us to get author and category id to use it in an Axios query.

I was trying to use @end event BUT(!) it works for only a sorting process but not for D&D between parent elements (categories).

I'll be very grateful for any help!

I'm seeking for a help with "Vue.Draggable". The second day I`m trying to update draggable array correctly.

The challenge is:

• update draggable array using puted set/get functions
• get draggable item properties including information about parent item and call axios function to update data on a MySQL.

Data sample:

{ cat1: { authors: [ { name: "Name 1" }, { name: "Name 2" } ] }, cat2: { authors: [ { name: "Name 3" }, { name: "Name 4" } ] } }

Rendering code:

<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" >

What I'm trying to do:

Actually, mentioned construction works fine. But only visually. VueX gives an error about 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 helps but in this case, D&D is not working even visually.

I have tried a lot of variants... One is - create a puted property for "categories" and use "get/set" functions to call actions->mutations from them. The problem is - categories->set function is not working when we are changing authors array structure.

The second problem is drag and drop author between categories in such a way it allows us to get author and category id to use it in an Axios query.

I was trying to use @end event BUT(!) it works for only a sorting process but not for D&D between parent elements (categories).

I'll be very grateful for any help!

• javascript
• vue.js
• vuejs2
• vuex
• vue.draggable

• 2 Can you show us the error vuex is giving you? That would help. – Jim B. Commented Oct 22, 2018 at 23:34
• Hello Jim. Thanks for responding. It gives errors only if I'm using "v-model" instead of ":value". [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. – Vlad Rovner Commented Oct 23, 2018 at 9:26
• 1 It's telling you the truth. You shouldn't modify vuex state outside of a mutator. We'll need to see more of your code to help, but suffice it to say you're not quite using vuex right. – Jim B. Commented Oct 27, 2018 at 21:35

1 Answer 1

In order to avoid to directly mutate the store state, you should use a puted value and use store action. Something like:

<draggable :id="index" v-model="authors" :options="{group:'authorslist', draggable:'.author'}">

And:

puted:{
 authors: {
        get() {
            return this.$store.state.authors
        },
        set(value) {
            this.$store.mit('updateAuthors', value)
        }
    }
}