VueJS JSON draggable/triables ne met pas à jour

Question

hey les gars, je me sers de ce lib, au moment où je suis en train juste un triables simple, imaginez que j'ai un tableau avec 3 éléments que je veux changer ses positions avec drags, je suis capable de le faire en ce moment. La chose est, quand je swich les endroits mon tableau JSON ne met pas à jour.

Je fais ceci:

ma liste:

<draggable v-model="getDocumentAttributes"> 
     <div v-if="value.key != 'Document'" class="panel panel-primary" v-for="(value, key, index) in 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> 

mon accessoire calculé que écouter vuex getter:

getDocumentAttributes(){ 
    return this.$store.getters.getDocumentAttributes; 
} 

Finaly ma liste et ma fonction de lecture du côté vue:

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

[...]

getDocumentAttributes: (state) => { 
     return state.document.atributes; 
    }, 

Answer 1

Utilisez les données locales dans la composante vue, ce sera modifié par vue-draggable.

De même, vous pouvez modifier un état de vuex uniquement avec des mutations. Pas avec des getters, pas avec des attributs calculés et pas avec des actions. Les propriétés calculées sont en lecture seule par défaut ici dans le readme du plugin que vous pouvez voir comment les utiliser https://github.com/SortableJS/Vue.Draggable#with-vuex

Answer 2

getDocumentAttributes: { 
    get() { 
     return this.$store.getters.getDocumentAttributes; 
    } 
    set (value) { 
     this.$store.commit('YOUR.COMMIT.TYPE', value) 
    } 
} 

Reiner a mentionné que les propriétés calculées sont en lecture seule par défaut. Voici comment changer cela.