Question

我正在寻求有关“ Vue.Draggable”的帮助。第二天，我试图正确更新可拖动数组。

挑战在于：

使用计算的设置/获取函数更新可拖动数组
获取可拖动项属性（包括有关父项的信息）并调用axios函数以更新MySQL上的数据。

数据样本：

{ cat1: { authors: [ { name: "Name 1" }, { name: "Name 2" } ] }, cat2: { authors: [ { name: "Name 3" }, { name: "Name 4" } ] } }

渲染代码：

<div v-for="(category, index) in categories">
    <draggable v-bind:id="index" v-model="category.authors" :options="{group:'authorslist', draggable:'.author'}" class="draggable-row" >
    <div v-for="author in category.authors" :key="author.id" class="author" >

我要做什么：

实际上，提到的建筑效果很好。但仅在视觉上。 VueX给出了有关突变过程的错误。

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers." Error: [vuex] Do not mutate vuex store state outside mutation handlers.

将v-model替换为:value会有所帮助，但在这种情况下，D＆D甚至无法在视觉上起作用。

我尝试了很多变体...一种是-为“类别”创建计算属性，并使用“获取/设置”功能从中调用actions->mutations。问题是-更改categories->set数组结构时authors函数不起作用。

第二个问题是将author拖放到categories之间，使我们可以获取作者和类别ID以便在Axios查询中使用它。

我试图使用@end事件BUT（！），它仅适用于排序过程，而不适用于父元素（类别）之间的D＆D。

我将非常感谢您的帮助！

Answer 1

为了避免直接改变存储状态，应使用计算值并使用存储操作。像这样：

<draggable :id="index" v-model="authors" :options="{group:'authorslist', draggable:'.author'}">

并且：

computed:{
 authors: {
        get() {
            return this.$store.state.authors
        },
        set(value) {
            this.$store.commit('updateAuthors', value)
        }
    }
}

VueJS：将计算的“设置/获取”与Vue.Draggable和VueX一起使用

1 个答案: