javascript - VueJS 可拖动/可排序 JSON 不更新

Question

嘿伙计们，我正在使用这个lib ，目前我正在尝试一个简单的排序，假设我有一个包含 3 个元素的数组，我想通过拖动来改变他的位置，我现在可以做到。问题是，当我切换位置时，​​我的 JSON 数组不会更新。

我这样做:

我的 list :

 <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>

我的监听 vuex getter 的计算 Prop :

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

最后是我的列表和 vuex 端的 getter 函数:

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

[...]

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

Answer 1

在vue组件中使用本地数据，这个会被vue-draggable修改。

还是一样的，你只能通过 mutations 来改变 vuex-state。不适用于 getter，不适用于计算属性，不适用于操作。默认情况下，计算属性是只读的，在插件的自述文件中您可以看到如何使用它们 https://github.com/SortableJS/Vue.Draggable#with-vuex