Question

我正在尝试让Vue可拖动以使用动态列表。我已经可以使用静态列表很好地工作了，但是任何动态似乎都行不通。

这是我目前拥有的脚本：

        <template v-for="(group, groupkey) in managegroupmodal.groups">
            <div :key="'draggroup-' + groupkey">
                <h4>{{ group.emoji }} {{ group.title }}</h4>
                <draggable
                    :list="managegroupmodal.groups[groupkey].sets"
                    group="manageModalGroup"
                    class="alert row shadow-sm m-1 gutter-b minh50"
                >
                    <span
                        class="btn btn-sm btn-font-sm font-weight-bold m-1 btn-light-success"
                        v-for="myelement in managegroupmodal.groups[groupkey].sets"
                        :key="'dragitem-' + myelement.id"
                        >{{ myelement.emoji }} {{ myelement.title }}</span
                    >
                </draggable>
            </div>
        </template>

问题是，每当我将元素和元素从一个列表拖放到另一个列表时，它都会回到其初始列表。我什至不能将元素拖放到列表中以对其重新排序。

有什么我想念的吗？

谢谢

Answer 1

好的，我能够解决此问题。列表中的元素之一似乎有一个额外的键，列表中的其他一些元素则没有，而且由于某种原因它破坏了脚本...

此后，我已经清理了所有内容，并确保列表中的所有元素都采用完全相同的格式设置，并且可以按预期工作！

将项目从一个列表拖动到另一个列表，并在VueJS / SortableJS中使用动态列表

1 个答案: