Use keep-alive to preserve cor data on toggle

js/components/forms/oversight.js

@@ -2,6 +2,27 @@ import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 import checkboxinput from '../checkbox_input'
 
+const cordata = {
+  name: 'cordata',
+
+  components: {
+    textinput,
+    checkboxinput,
+  },
+
+  mixins: [FormMixin],
+
+  props: {
+    initialCorInvite: Boolean,
+  },
+
+  data: function() {
+    return {
+      cor_invite: this.initialCorInvite,
+    }
+  },
+}
+
 export default {
   name: 'oversight',
 
@@ -10,6 +31,7 @@ export default {
   components: {
     textinput,
     checkboxinput,
+    cordata,
   },
 
   props: {

templates/task_orders/new/oversight.html

@@ -26,13 +26,18 @@
         <h3 class="subheading">{{ "task_orders.new.oversight.cor_info_title" | translate }}</h3>
         <p>{{ "task_orders.new.oversight.cor_info_paragraph" | translate }}</p>
         {{ CheckboxInput(form.am_cor, classes="normal") }}
-        <template v-if="!am_cor">
+
-            {{ UserInfo(form.cor_first_name, form.cor_last_name, form.cor_email, form.cor_phone_number) }}
+        <keep-alive>
-            {{ CheckboxInput(form.cor_invite) }}
+            <cordata v-bind:initial-cor-invite="cor_invite" inline-template v-if="!am_cor">
-            <template v-if="cor_invite">
+                <div>
-                {{ TextInput(form.cor_dod_id, placeholder="1234567890", tooltip="Why", tooltip_title='Why', validation='dodId', classes="task-order__invite-officer")}}
+                {{ UserInfo(form.cor_first_name, form.cor_last_name, form.cor_email, form.cor_phone_number) }}
-            </template>
+                {{ CheckboxInput(form.cor_invite) }}
-        </template>
+                <template v-if="cor_invite">
+                    {{ TextInput(form.cor_dod_id, placeholder="1234567890", tooltip="Why", tooltip_title='Why', validation='dodId', classes="task-order__invite-officer")}}
+                </template>
+                </div>
+            </cordata>
+        </keep-alive>
 
         <hr />