added logic to render and delete element/children components in order

Author: keliphan

src/components/HomeQueue.vue

@@ -11,9 +11,10 @@
       @start="drag = true"
       @end="drag = false"
     >
-      <div class="list-group-item" v-for="(element, index) in renderList" :key="index + Date.now()">
-        {{ element.text }}
-        <i class="fas fa fa-trash fa-md" @click="deleteElement(index)"></i>
+      <!-- <div class="list-group-item" v-for="(element, index) in renderList" :key="index + Date.now()"> -->
+      <div class="list-group-item" v-for="(element) in renderList" :key="element[1] + Date.now()">
+        {{ element[0] }}
+        <i class="fas fa fa-trash fa-md" @click="deleteElement(element[1])"></i>
       </div>
     </draggable>
   </section>
@@ -44,7 +45,10 @@ export default {
     renderList: {
       get () {
         if (this.activeComponent === '') return this.selectedElementList
-        return this.componentMap[this.activeComponent].htmlList.filter(el => el.text)
+        let newArr = this.componentMap[this.activeComponent].htmlList.map((el, index) => [el.text, index]).filter(el => {
+          return el[0] !== undefined
+        })
+        return newArr
       },
       set (value) {
         this.$store.dispatch(setSelectedElementList, value)

src/store/mutations.js

@@ -183,7 +183,10 @@ const mutations = {
     for (let compKey in newObj) {
       let children = newObj[compKey].children
       children.forEach((child, index) => {
-        if (activeComponent === child) children.splice(index, 1)
+        if (activeComponent === child) {
+          children.splice(index, 1)
+          newObj[compKey].htmlList = newObj[compKey].htmlList.filter(el => el !== activeComponent)
+        }
       })
     }