vddl
vddl copied to clipboard
hejianxian
Moving an element actually copies it
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.
Try setting the index to the id of the item instead of a vue-generated index number.
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)
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.
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.
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.
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" '.
