VueDraggable 嵌套列表问题

Question

我想使用 VueDraggable 库并创建嵌套列表。所以我根据文档制作了一个组件。一切正常，直到我尝试制作嵌套项目。我不能。仅当嵌套列表已存在时，我才能插入其中或将项目从列表中拖走。但无法创建新的嵌套项。这是我的代码

<template>
    <div class="category-table">
        <draggable :list="items" item-key="id" @change="logList()" :group="{name: 'g1'}">
            <template #item="{ element }">
                <div class="category">
                    <div class="category-title">
                        <div class="category-title__text">
                            <div class="drag-drop">
                                <Iconbase name="DragDrop"></Iconbase>
                            </div>
                            {{ element[titleKey] }}
                        </div>
                        <div class="category-title__buttons">
                            <div v-if="element[nestedItemsKey] && element[nestedItemsKey].length"
                                @click="toggleNestedItems(element[idKey])"
                                :class="{ active: activeId === element[idKey], arrow: true }"
                            >
                                <Iconbase name="Arrowdown" height="10" width="10"></Iconbase>
                            </div>
                            <div class="edit">
                                <EditActions :id="element[idKey]" :options="actions" @editactions="action($event)" />
                            </div>
                        </div>
                    </div>
                    <div class="divider-container" v-if="activeId === element[idKey]">
                        <hr class="divider" />
                    </div>
                    <!--<div v-if="activeId === element[idKey] && element[nestedItemsKey]">-->
                    <NestedDraggable v-if="element[nestedItemsKey]"
                                     :items="element[nestedItemsKey]"
                                     :titleKey="titleKey"
                                     :nestedItemsKey="nestedItemsKey"
                                     @action="action($event)"
                    ></NestedDraggable>
                </div>
            </template>
        </draggable>
    </div>
</template>

<script lang="ts" setup>
import draggable from 'vuedraggable'
import NestedDraggable from '@/components/ui/draggable/NestedDraggable.vue'
import EditActions from '@/components/ui/button/EditActions.vue'
import Iconbase from '@/components/icons/Iconbase.vue'
import { ref, defineProps, computed } from 'vue'

// Component props
const props = defineProps({
    items: {
        type: Array,
        required: true
    },
    // This is universal component which should handle any items object with its own keys.
    // Keys which component will use to access items object properties.
    // Component uses this: id, title, description, nestedItemsKey
    idKey: {
        type: String,
        default: 'id',
    },
    titleKey: {  // The item.key which will be used as title
        type: String,
        default: 'title',
    },
    nestedItemsKey: {  // The item.key where nested items are stored eg. item.children or item.subcategory
        type: String,
        default: 'subcategory'
    },
    translateKeys: []
})

// Component emits (events)
const emit = defineEmits(['action'])

// EditActions component options
const actions = [
    { name: 'create_nested_item', ico: 'Pluscircle' },
    { name: 'edit', ico: 'Penciledit' },
    { name: 'delete', ico: 'Delete' }
]

let activeId = ref(-1)

function logList() {
    console.log('change')
    console.log(props.items)
}

function action(event) {
    console.log('NestedDraggable action')
    console.log(event)
    emit('action', event)
}

function toggleNestedItems(id) {
    console.log('toggleOpen')
    console.log(id)
    activeId.value = activeId.value === id
        ? -1   // Zatvorí sa aktívny accordion
        : id  // Otvorí sa vybraný accordion
}

</script>

Answer 1

一天结束时，我使用了另一个库https://github.com/phphe/he-tree/issues/74