更改位置时可排序数组不更新 [英] sortable array not updating when changing position

问题描述

我在 vuejs 中使用可拖动和可排序，但我遇到了一个问题，例如，每次我更改两个 div 的位置时，它们都会更改，但 json 数组不会更新.

我正在使用 vuex，我的组件模板中有这个 html:

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

</可拖动>

然后我得到了我的计算道具，它获取和设置来自 vuex 的数据，

计算:{部分(){返回 this.$store.getters.getDocument;},我的列表: {得到() {返回 this.$store.getters.getDocument.getDocumentAttributes;},设定值) {this.$store.commit('updateList', value)}}},

updateList 应该更新我的列表(如果我想得很好)所以我有这个:

},突变:{更新列表:(状态，列表)=>{state.Doc.atributes = list;}},文档:{id":0"，属性":[]}，

我尝试用与属性数组匹配的新数组替换旧数组，这有什么帮助吗?

ps:文档在数据里面，我只是尝试放置必要的代码.

谢谢

解决方案

我有一个类似的设置，并通过在计算属性中使用 this.$forceUpdate() 使其工作.

计算:{部分 () {返回 this.$store.getters.getDocument;},我的列表: {得到 () {返回 this.$store.getters.getDocument.getDocumentAttributes;},设定值) {this.$forceUpdate()this.$store.commit('updateList', value)}}},

我假设您还试图直接调度一个突变，因为您没有列出任何操作，这是不正确的.

您应该调度一个动作，提交一个变化...见下文:

动作:{更新列表:({提交}，列表){提交('更新列表'，列表)}},突变:{更新列表:(状态，列表)=>{state.Doc.atributes = list;}},

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

解决方案

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;
  }
},

这篇关于更改位置时可排序数组不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！