更改位置时可排序数组不更新

Question

我正在使用 vuejs 的可拖动和可排序，并且我有一个问题，例如，每次我更改两个 div 的位置时，它们都会更改，但 json 数组不会更新。

我正在使用 vuex，我的组件模板中有这个 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>

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

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

},

updateList 应该更新我的列表（如果我想得好的话）所以我有这个：

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



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

我尝试用与属性数组匹配的新数组替换旧数组，对此有何帮助？

ps：文档在数据里面，我只是试着放一些必要的代码。

谢谢

Answer 1

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

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

编辑：

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

您应该发送一个动作，该动作提交一个突变...见下文：

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