diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue index 43e0bb28..7587daa7 100644 --- a/src/components/DndList/index.vue +++ b/src/components/DndList/index.vue @@ -4,7 +4,7 @@ <h3>{{ list1Title }}</h3> <draggable :list="list1" :options="{group:'article'}" class="dragArea"> <div v-for="element in list1" :key="element.id" class="list-complete-item"> - <div class="list-complete-item-handle">[{{ element.author }}] {{ element.title }}</div> + <div class="list-complete-item-handle">{{ element.id }}[{{ element.author }}] {{ element.title }}</div> <div style="position:absolute;right:0px;"> <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)"> <i style="color:#ff4949" class="el-icon-delete"/> @@ -15,9 +15,9 @@ </div> <div :style="{width:width2}" class="dndList-list"> <h3>{{ list2Title }}</h3> - <draggable :list="filterList2" :options="{group:'article'}" class="dragArea"> - <div v-for="element in filterList2" :key="element.id" class="list-complete-item"> - <div class="list-complete-item-handle2" @click="pushEle(element)"> [{{ element.author }}] {{ element.title }}</div> + <draggable :list="list2" :options="{group:'article'}" class="dragArea"> + <div v-for="element in list2" :key="element.id" class="list-complete-item"> + <div class="list-complete-item-handle2" @click="pushEle(element)">{{ element.id }} [{{ element.author }}] {{ element.title }}</div> </div> </draggable> </div> @@ -60,16 +60,6 @@ export default { default: '48%' } }, - computed: { - filterList2() { - return this.list2.filter(v => { - if (this.isNotInList1(v)) { - return v - } - return false - }) - } - }, methods: { isNotInList1(v) { return this.list1.every(k => v.id !== k.id) @@ -90,7 +80,16 @@ export default { } }, pushEle(ele) { - this.list1.push(ele) + for (const item of this.list2) { + if (item.id === ele.id) { + const index = this.list2.indexOf(item) + this.list2.splice(index, 1) + break + } + } + if (this.isNotInList1(ele)) { + this.list1.push(ele) + } } } }