4

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

挑战在于：

  • 使用计算的 set/get 函数更新可拖动数组
  • 获取可拖动项目属性，包括有关父项目的信息并调用 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为:valuehelp 但在这种情况下，D&D 甚至在视觉上都无法正常工作。

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

第二个问题是以这样的方式拖放，author它categories允许我们获取作者和类别 ID 以在Axios查询中使用它。

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

我将非常感谢任何帮助！

4

1 回答 1

6

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

<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)
        }
    }
}
于 2018-12-25T15:38:11.283 回答