Fix template and component so LOA values are posted through the form

js/components/forms/ko_review.js

@@ -2,12 +2,15 @@ import textinput from '../text_input'
 import DateSelector from '../date_selector'
 import uploadinput from '../upload_input'
 import inputValidations from '../../lib/input_validations'
+import FormMixin from '../../mixins/form'
 
 const createLOA = number => ({ number })
 
 export default {
   name: 'ko-review',
 
+  mixins: [FormMixin],
+
   components: {
     textinput,
     DateSelector,
@@ -23,15 +26,18 @@ export default {
   },
 
   data: function() {
-    const { loa } = this.initialData
+    const loa_list = this.initialData['loa']
-    const loas =
+    const loas = (loa_list.length > 0 ? loa_list : ['']).map(createLOA)
-      typeof loa === 'array' && loa.length > 0 ? this.initialValue : ['']
 
     return {
       loas,
     }
   },
 
+  mounted: function() {
+    this.$root.$on('onLOAAdded', this.addLOA)
+  },
+
   methods: {
     addLOA: function(event) {
       this.loas.push(createLOA(''))

templates/portfolios/task_orders/review.html

@@ -101,8 +101,8 @@
                     <label :for="'loa-' + i">
                       <div class="usa-input__title">Line of Accounting (LOA) #</div>
                     </label>
-                    <input type="text" :id="'loa-' + i" placeholder="1234567890"/>
+                    <input type="text" v-model='loa.number' :id="'loa-' + i" placeholder="1234567890"/>
-                    <input type="hidden" :name="'loa-' + i"/>
+                    <input type="hidden" :name="'loa-' + i" v-model='loa.number'/>
                   </div>
                 </li>
               </ul>