Htmlelements now have a unique id

Author: LOLDragoon

src/components/HomeQueue.vue

@@ -44,7 +44,7 @@ export default {
     ...mapState(['selectedElementList', 'componentMap', 'activeComponent']),
     renderList: {
       get () {
-        if (this.activeComponent === '') return this.selectedElementList
+        if (this.activeComponent === '') return this.selectedElementList.map((el,index) => [el.text, index])
         // change activeComponent's htmlList into an array of arrays ([element/component name, index in state])
         let sortedHTML = this.componentMap[this.activeComponent].htmlList.map((el, index) => [el.text, index]).filter(el => {
           return el[0] !== undefined

src/components/Icons.vue

@@ -30,7 +30,8 @@ export default {
   },
   methods: {
     changeState (elementName) {
-      if (this.activeComponent === '') { this.$emit('getClickedIcon', elementName) } else this.$emit('activeElement', elementName)
+      if (this.activeComponent === '') { this.$emit('getClickedIcon', {elementName, date:Date.now()}) }
+       else this.$emit('activeElement', {elementName,date:Date.now()})
     }
   },
   watch: {

src/store/mutations.js

@@ -134,19 +134,20 @@ const mutations = {
   // adds a html tag from the Icons.vue to the HomeQueue.vue
   // event: getClickedIcon @Icons.vue
   [types.ADD_TO_SELECTED_ELEMENT_LIST]: (state, payload) => {
-    state.selectedElementList.push({ text: payload, children: [] })
+    state.selectedElementList.push({ text: payload.elementName, id: payload.date, children: [] })
   },
   // allows user to create a new component in ComponentDisplay.vue
   // invovled in creating a new component, porbably does more
   [types.SET_SELECTED_ELEMENT_LIST]: (state, payload) => {
     state.selectedElementList = payload
   },
-  [types.ADD_TO_COMPONENT_HTML_LIST]: (state, elementName) => {
+  [types.ADD_TO_COMPONENT_HTML_LIST]: (state, payload) => {
     const componentName = state.activeComponent
 
     state.componentMap[componentName] = {...state.componentMap[componentName]}
     state.componentMap[componentName].htmlList.push({
-      text: elementName,
+      text: payload.elementName,
+      id: payload.date,
       children: []
     })
   },

src/store/state/index.js

@@ -13,11 +13,14 @@ let hardA = {
     children:[{
       children:[{
         text: 'button',
-        children:[]
+        children:[],
+        id:0
       }],
-      text:'form'
+      text:'form',
+      id:2
     }],
-    text: "div"
+    text: "div",
+    id:1
   }],
   children: [],
   parent: {},