Update usage of new component

client/src/components/content-blocks/ContentList.vue

@@ -5,7 +5,9 @@
       class="content-list__item"
       v-for="(item, index) in items">
       <p class="content-list__numbering">{{ alphaIndex(index) }})</p>
-      <slot :item="item">
+      <slot
+        :item="item"
+        :index="index">
         {{ item.id }}
       </slot>
     </li>

client/src/pages/createContentBlock.vue

@@ -15,17 +15,28 @@
           placeholder="z.B. Auftrag 3"
           @input="val=$event"/>
       </content-form-section>
+      <div
+        :key="content.id"
+        v-for="content in contents"/>
       <div>
         <add-content-link/>
       </div>
-      <ol class="content-list">
-        <li class="content-list__item">
-          asdas
-        </li>
-        <li class="content-list__item">
-          asdas
-        </li>
-      </ol>
+
+      <content-list :items="items">
+        <template v-slot="{item, index}">
+          {{ item }}
+          <content-element
+            :element="item"
+            @update="update(index, $event)"
+            @remove="remove(index)"
+          />
+        </template>
+      </content-list>
+      <p>hello</p>
+      <content-list
+        :items="items"
+        :starting-index="2"/>
+      <content-block-element-chooser-widget />
     </div>
     <footer class="create-content-block__footer">
       <a class="button button--primary">Speichern</a>
@@ -40,9 +51,16 @@
   import TextForm from '@/components/content-forms/TextForm';
   import InputWithLabel from '@/components/ui/InputWithLabel';
   import AddContentLink from '@/components/content-block-form/AddContentLink';
+  import ContentList from '@/components/content-blocks/ContentList';
+  import ContentBlockElementChooserWidget from '@/components/content-forms/ContentBlockElementChooserWidget';
+  import test from '@/helpers/content-form/type';
+  import ContentElement from '@/components/content-block-form/ContentElement';
 
   export default {
     components: {
+      ContentElement,
+      ContentBlockElementChooserWidget,
+      ContentList,
       AddContentLink,
       InputWithLabel,
       TextForm,
@@ -51,8 +69,30 @@
     },
 
     data: () => ({
-      val: ''
-    })
+      val: '',
+      items: [{
+        id: 123,
+      }, {
+        id: 134
+      }],
+      contents: [
+        {
+          id: 1,
+          type: 'text_block'
+        }
+      ]
+    }),
+
+    mounted() { test(); },
+    methods: {
+      update(index, element) {
+        console.log('updating', index, element);
+        this.items.splice(index, 1, element);
+      },
+      remove(index) {
+        this.items.splice(index, 1);
+      }
+    }
   };
 </script>