Make link form component reactive

client/src/components/NewContentBlockWizard.vue

@@ -8,6 +8,8 @@
         :class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
         :element="element" :index="index"
         v-on:change-type="changeType"
+        v-on:link-change-url="changeLinkUrl"
+        v-on:link-change-text="changeLinkText"
       ></component>
       <a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
         <trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
@@ -68,6 +70,18 @@
         }
         return 'content-block-chooser-widget'
       },
+      changeLinkUrl(value, index) {
+        this.elements.splice(index, 1, {
+          ...this.elements[index],
+          url: value
+        });
+      },
+      changeLinkText(value, index) {
+        this.elements.splice(index, 1, {
+          ...this.elements[index],
+          text: value
+        });
+      },
       removeElement(index) {
         this.elements.splice(index, 1);
       },
@@ -75,7 +89,20 @@
         this.elements.splice(index + 1, 0, {})
       },
       changeType(index, type) {
-        this.elements.splice(index, 1, {type: type});
+        let el = {
+          type: type
+        };
+        switch (type) {
+          case 'link':
+            el = {
+              ...el,
+              text: '',
+              url: ''
+            };
+            break;
+        }
+
+        this.elements.splice(index, 1, el);
       }
     },
 

client/src/components/content-forms/LinkForm.vue

@@ -1,28 +1,27 @@
 <template>
   <div class="link-form">
-    <div class="link-form__property">
-      <input placeholder="Name erfassen..." class="link-form__input skillbox-input">
-    </div>
-    <div class="link-form__property">
-      <input placeholder="URL einfügen..." class="link-form__input skillbox-input">
-    </div>
+    <input placeholder="Name erfassen..." class="link-form__text skillbox-input" :value="text" v-on:input="$emit('link-change-text', $event.target.value, index)">
+
+    <input placeholder="URL einfügen..." class="link-form__url skillbox-input" :value="url" v-on:input="$emit('link-change-url', $event.target.value, index)">
   </div>
 </template>
 
 <script>
+  export default {
+    props: ['text', 'url', 'index']
+  }
 </script>
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
 
   .link-form {
-    &__property {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 11px;
-    }
-    &__input {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-row-gap: 11px;
+
+    &__text,
+    &__url {
       width: $modal-input-width;
     }
   }