sortable array not updating when changing position

问题

i am using the dragable and sortable with vuejs, and i have a issue, everytime i change the position of two divs for example, they change but the json array doesn't update.

I am working with vuex, and i have in my component template this html:

<draggable v-model="myList">
    <div class="panel panel-primary" v-for="(value, key, index) in this.$store.getters.getDocumentAttributes">
        <div class="panel-body quote">
            <span @click="removeSection(index,key)" class="pull-right glyphicon glyphicon-remove text-info"></span>
            <p>{{value.key}}</p>
        </div>
    </div>
</draggable>

then i got my computed prop that gets and sets the data that come from vuex,

computed: {
    sections() {
        return this.$store.getters.getDocument;
    },
    myList: {
        get() {
            return this.$store.getters.getDocument.getDocumentAttributes;
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }

},

the updateList should update my list(if i am thinking well) so i have this:

},
mutations: {
      updateList: (state,list) => {
        state.Doc.atributes = list;
    }
},



document: { "id": "0", "atributes": [] },

i try to replace the old array with the new matching with the atributes array, any help with this?

ps: the document is inside the data, i just tried to place the necessary code.

Thanks

回答1:

I have a similar setup and got this to work by using this.$forceUpdate() in the computed property.

computed: {
  sections () {
    return this.$store.getters.getDocument;
  },
  myList: {
    get () {
      return this.$store.getters.getDocument.getDocumentAttributes;
    },
    set (value) {
      this.$forceUpdate()
      this.$store.commit('updateList', value)
    }
  }
},

EDIT:

I'm assuming you're also trying to directly dispatch a mutation since you don't have any actions listed, which is incorrect.

You should be dispatching an action, that commits a mutation... See below:

actions: {
  updateList: ({ commit }, list) {
    commit('updateList', list)
  }
},
mutations: {
  updateList: (state, list) => {
    state.Doc.atributes = list;
  }
},

来源：https://stackoverflow.com/questions/45570391/sortable-array-not-updating-when-changing-position