Make remove CLIN button work

js/components/clin_fields.js

@@ -62,6 +62,7 @@ export default {
       popValid: popValidation,
       showPopError: showPopValidation,
       clinNumber: clinNumber,
+      showClin: true,
     }
   },
 
@@ -77,7 +78,7 @@ export default {
     })
     emitEvent('field-mount', this, {
       optional: false,
-      name: POP,
+      name: POP + "-" + this.clinIndex,
       valid: this.checkPopValid(),
     })
   },
@@ -103,7 +104,7 @@ export default {
       }
 
       emitEvent('field-change', this, {
-        name: POP,
+        name: POP + "-" + this.clinIndex,
         valid: this.checkPopValid(),
       })
     },
@@ -127,6 +128,13 @@ export default {
         }
       }
     },
+
+    removeClin: function() {
+      this.showClin = false
+      emitEvent('remove-clin', this, {
+        clinIndex: this.clinIndex,
+      })
+    },
   },
 
   computed: {

js/components/forms/to_form.js

@@ -56,6 +56,7 @@ export default {
 
   mounted: function() {
     this.$root.$on('clin-change', this.calculateClinAmounts)
+    this.$root.$on('remove-clin', this.handleRemoveClin)
   },
 
   methods: {
@@ -64,10 +65,9 @@ export default {
       ++this.clinIndex
     },
 
-    removeClin: function(clinIndex) {
-      if (this.clins > 0) {
-        console.log('removed CLIN')
-      }
+    handleRemoveClin: function(event) {
+      --this.clinIndex
+      console.log('removed clin')
     },
 
     calculateClinAmounts: function(event) {

templates/task_orders/step_3.html

@@ -26,13 +26,13 @@
       v-bind:initial-clin-type="'JEDI_CLIN_1'"
     {% endif %}
     inline-template>
-    <div class="clin-card">
+    <div class="clin-card" v-if="showClin">
       <div class="card__title">
         <span class="h4" v-html='clinTitle'></span>
         <button
-          v-if='$parent.clins > 0'
+          v-if='$parent.clinIndex > 0'
           class="icon-link icon-link__remove-clin"
-          v-on:click="$parent.removeClin(clinIndex)"
+          v-on:click="removeClin()"
           type="button">
           {{ Icon(name='x') }}
         </button>