Add new element and change type at correct position

client/src/components/AddContentElement.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="add-content-element" v-on:click="$emit('add-element')">
+  <div class="add-content-element" v-on:click="$emit('add-element', index)">
     <add-icon class="add-content-element__icon"></add-icon>
   </div>
 </template>
@@ -8,6 +8,8 @@
   import AddIcon from '@/components/icons/AddIcon';
 
   export default {
+    props: ['index'],
+
     components: {
       AddIcon
     }

client/src/components/NewContentBlockWizard.vue

@@ -1,18 +1,21 @@
 <template>
   <modal>
     <content-block-title-input slot="header"></content-block-title-input>
-
     <div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
       <component :is="type(element)"
-                 :class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}" :element="element" :index="index"
-                  v-on:change-type="changeType"
+                 :class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
+                 :element="element" :index="index"
+                 v-on:change-type="changeType"
       ></component>
       <a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
         <trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
                     class="new-content-block-wizard__trash-icon"></trash-icon>
       </a>
 
-      <add-content-element class="new-content-block-wizard__add" v-on:add-element="addElement"></add-content-element>
+      <add-content-element class="new-content-block-wizard__add"
+                           v-on:add-element="addElement"
+                           :index="index"
+      ></add-content-element>
     </div>
   </modal>
 </template>
@@ -46,10 +49,8 @@
       removeElement(index) {
         this.elements.splice(index, 1);
       },
-      addElement() {
-        this.elements.push({
-          id: 5
-        })
+      addElement(index) {
+        this.elements.splice(index + 1, 0, {})
       },
       changeType(index) {
         this.elements.splice(index, 1, {type: 'link'});