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": [] },

我尝试使用与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; } },

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

1 个答案: