Rename component

client/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="{'no-scroll': showModal}">
-    <new-content-block v-if="showModal"></new-content-block>
+    <new-content-block-wizard v-if="showModal"></new-content-block-wizard>
     <component :is="layout"></component>
   </div>
 </template>
@@ -9,7 +9,7 @@
   import DefaultLayout from '@/layouts/DefaultLayout';
   import SimpleLayout from '@/layouts/SimpleLayout';
   import Modal from '@/components/Modal';
-  import NewContentBlock from '@/components/NewContentBlock';
+  import NewContentBlockWizard from '@/components/NewContentBlockWizard';
 
   export default {
     name: 'App',
@@ -18,7 +18,7 @@
       DefaultLayout,
       SimpleLayout,
       Modal,
-      NewContentBlock
+      NewContentBlockWizard
     },
 
     computed: {

client/src/components/NewContentBlockWizard.vue

@@ -1,8 +1,11 @@
 <template>
   <modal>
     <content-block-title-input slot="header"></content-block-title-input>
-    <add-content-element></add-content-element>
-    <content-block-chooser-widget></content-block-chooser-widget>
+
+    <div v-for="element in elements" :key="element.id">
+      <component :is="type(element)"></component>
+      <add-content-element></add-content-element>
+    </div>
   </modal>
 </template>
 
@@ -18,6 +21,22 @@
       ContentBlockChooserWidget,
       ContentBlockTitleInput,
       AddContentElement
+    },
+
+    methods: {
+      type(element) {
+        return 'content-block-chooser-widget'
+      }
+    },
+
+    data() {
+      return {
+        elements: [
+          {id: 1},
+          {id: 2},
+          {id: 3}
+        ]
+      }
     }
   }
 </script>