Vue Draggable - 如何从单独的 vue 文件中的一个列表拖动到另一个单独的 vue 文件中的另一个列表

Question

我有一个 vue 文件中的项目列表，我试图将其拖到另一个 vue 文件中。这两个文件都是通过 vue router 在页面上打开的。我只能在同一个列表中移动项目，但我无法让它们从一个列表传递到另一个列表。这是我的一个文件的代码：

<template>
    <v-card height="100%">
        <v-card-title>Drag & Drop</v-card-title>
        <v-card-text>
            <v-layout>
                <v-expansion-panels
                        popout
                >
                    <v-expansion-panel
                           v-for="draggableItem in draggableList"
                           :key="draggableItem.name"
                    >
                        <v-expansion-panel-header>{{ draggableItem.title }}</v-expansion-panel-header>
                        <draggable
                                :list="draggableItem.options"
                                :group="{ name: draggableItem.name + ' options', pull: 'clone', put: false }"
                        >
                            <v-expansion-panel-content
                                    v-for="option in draggableItem.options"
                                    :key="option.name"
                            >
                                {{ option.title }}
                            </v-expansion-panel-content>
                        </draggable>
                    </v-expansion-panel>
                </v-expansion-panels>
            </v-layout>
        </v-card-text>
    </v-card>
</template>

<script>
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable,
        },
        data() {
            return {
                draggableList: [
                    {
                        name: "collections",
                        title: "Collections",
                        options: [
                            {
                                name: "profile",
                                title: "Profile"
                            },
                            {
                                name: "event",
                                title: "Event"
                            },
                            {
                                name: "attribute",
                                title: "Attribute"
                            },
                        ],
                    },
                ]
            }
        },
    }

这是另一个文件：

<template>
    <v-card>
        <v-card-title>Drop here</v-card-title>
        <v-card-text>
            <draggable
                    :list="canvas"
                    group="collections"
            >
                <v-flex
                        v-for="item in canvas"
                        :key="item.name"
                >
                    {{ item.title }}
                </v-flex>
            </draggable>
        </v-card-text>
    </v-card>
</template>

<script>
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable,
        },
        data() {
            return {
                canvas: [
                    {
                        name: "profile",
                        title: "Profile"
                    },
                ]
            }
        }
    }
</script>

我实际上只需要能够克隆从一个列表拖到另一个列表的项目。

谢谢！

Answer 1

您可以使用 vuex 构建一个简单的“桥梁”，将文件或组件的元素传递给另一个组件，您可以查阅 vuex 的官方文档https://vuex.vuejs.org/