Moving an element actually copies it

[blackandred]

Hello,

I'm attempting to understand how does the vddl work and I got stuck at my list elements being copied instead of moved.

CategoryTree.vue

<template>
    <aside class="menu">
        <vddl-list :list="categories" :horizontal="false">
            <ul class="menu-list">
                <node v-for="(category, index) in categories" :category="category" :index="index" :list="categories"></node>
            </ul>
        </vddl-list>
    </aside>
</template>

<script>
    import { default as node } from './Node'

    export default {
        components: {
            node
        },

        data () {
            return {
                draggingDisabled: false,
                categories: [
                    {
                        "id": 8,
                        "date_added": "2016-10-21 18:56:51",
                        "name": "Newsy",
                        "children": [
                            {
                                "id": 24,
                                "date_added": "2017-07-21 15:20:52",
                                "name": "Wydarzenia",
                                "children": []
                            },
                            {
                                "id": 14,
                                "date_added": "2017-03-18 18:36:52",
                                "name": "Ruch pracowniczy",
                                "children": []
                            },
                            {
                                "id": 13,
                                "date_added": "2016-12-28 20:10:52",
                                "name": "Lokatorzy",
                                "children": []
                            },
                            {
                                "id": 16,
                                "date_added": "2016-12-28 20:16:07",
                                "name": "Antyfaszyzm",
                                "children": []
                            },
                            {
                                "id": 18,
                                "date_added": "2016-12-28 20:13:00",
                                "name": "Akcje spo\u0142eczne",
                                "children": []
                            },
                            {
                                "id": 23,
                                "date_added": "2017-05-10 14:22:04",
                                "name": "\u015arodowisko anarchistyczne",
                                "children": []
                            },
                            {
                                "id": 12,
                                "date_added": "2016-12-28 20:10:41",
                                "name": "Represje",
                                "children": []
                            },
                            {
                                "id": 17,
                                "date_added": "2016-12-28 20:12:53",
                                "name": "Prawa zwierz\u0105t",
                                "children": []
                            },
                            {
                                "id": 22,
                                "date_added": "2017-03-18 18:37:46",
                                "name": "Kultura, sztuka, muzyka",
                                "children": []
                            }
                        ]
                    },
                    {
                        "id": 2,
                        "date_added": "2016-11-28 22:19:07",
                        "name": "Publikacje",
                        "children": [
                            {
                                "id": 15,
                                "date_added": "2016-12-30 11:26:41",
                                "name": "Ruch pracowniczy",
                                "children": []
                            },
                            {
                                "id": 20,
                                "date_added": "2016-12-30 11:26:38",
                                "name": "Antyfaszyzm",
                                "children": []
                            },
                            {
                                "id": 5,
                                "date_added": "2016-12-30 11:26:45",
                                "name": "Antykapitalizm",
                                "children": []
                            },
                            {
                                "id": 7,
                                "date_added": "2016-12-30 11:26:53",
                                "name": "Historia",
                                "children": []
                            },
                            {
                                "id": 6,
                                "date_added": "2017-03-18 18:37:42",
                                "name": "Kultura, sztuka, muzyka",
                                "children": []
                            },
                            {
                                "id": 19,
                                "date_added": "2016-12-30 11:27:01",
                                "name": "Ruch wolno\u015bciowy",
                                "children": []
                            },
                            {
                                "id": 3,
                                "date_added": "2016-12-30 11:27:04",
                                "name": "Prawa zwierz\u0105t",
                                "children": []
                            },
                            {
                                "id": 21,
                                "date_added": "2016-12-30 11:27:10",
                                "name": "Blog techniczny",
                                "children": []
                            }
                        ]
                    }
                ]
            }
        }
    }
</script>

Node.vue

<template>
    <vddl-draggable :draggable="category" :wrapper="list" :index="index" effect-allowed="move" :key="index" external-sources="false">
        <li>
            <a :data-category-id="category.id" :data-added="category.date_added">[{{ index }}] {{ category.name }}</a>

            <vddl-list v-if="category.children.length > 0" :list="category.children" :horizontal="false">
                <ul>
                    <node v-for="(child, num) in category.children" :category="child" :index="num" :list="category.children"></node>
                </ul>
            </vddl-list>
        </li>
    </vddl-draggable>
</template>

<script>
    export default {
        name: 'node',
        props: ['category', 'list', 'index']
    }
</script>

Do you have any ideas if I'm doing anything wrong or is it a bug?

Thanks.

[awulkan]

Try setting the index to the id of the item instead of a vue-generated index number.

[mlapeyre3]

Starting from what @awulkan wrote, I set :key="item.id" and :index="itemVueGeneratedIndex"
This works (as there is no duplication or strange behavior anymore) but now I got the console warning:
Duplicate keys detected: '5'. This may cause an update error. which seems to be a known issue ( #23 and #27)

[awulkan]

Yes, the console warning is a known error. The app should still work as normal though. :)
I'm sure the error bug will be sorted out eventually.

[mgthomas99]

Possible duplication of #4 ?

[blackandred]

Sorry for not responding, I had A break in the project, I got back to it and I will test the proposed solution on Sunday or Monday. Thanks for the support.

[blackandred]

It seems that adding a new property "orderIndex" and making it a index for dragging does not make it working. It still copies but not duplicates that much.

[RebeccaIsCoding]

As @awulkan already said. Do not take the vue generated index. Instead set the key to :key="child.id" in here 'v-for="(child, num) in category.children" :category="child" :index="num" :list="category.children" '.

[ronaldvanderreest]

works like a charm