Update BaseForm and nested vue components to properly use emitters

js/components/forms/base_form.js

@@ -2,7 +2,7 @@ import ally from 'ally.js'
 import stickybits from 'stickybits'
 
 import DateSelector from '../date_selector'
-import FormMixin from '../../mixins/form'
+import FormMixin from '../../mixins/form_mixin'
 import Modal from '../../mixins/modal'
 import MultiStepModalForm from './multi_step_modal_form'
 import checkboxinput from '../checkbox_input'
@@ -10,7 +10,6 @@ import multicheckboxinput from '../multi_checkbox_input'
 import optionsinput from '../options_input'
 import SemiCollapsibleText from '../semi_collapsible_text'
 import textinput from '../text_input'
-import ToForm from './to_form.js'
 import toggler from '../toggler'
 import uploadinput from '../upload_input'
 
@@ -25,7 +24,6 @@ export default {
     optionsinput,
     SemiCollapsibleText,
     textinput,
-    ToForm,
     toggler,
     uploadinput,
   },

js/components/multi_checkbox_input.js

@@ -1,15 +1,6 @@
-import optionsinput from '../components/options_input'
-import textinput from '../components/text_input'
-import { emitEvent } from '../lib/emitters'
-
 export default {
   name: 'multicheckboxinput',
 
-  components: {
-    optionsinput,
-    textinput,
-  },
-
   props: {
     name: String,
     initialErrors: {
@@ -41,10 +32,7 @@ export default {
 
   methods: {
     onInput: function(e) {
-      emitEvent('field-change', this, {
+      this.$parent.$emit('field-change')
-        value: e.target.value,
-        name: this.name,
-      })
       this.showError = false
       this.showValid = true
     },
@@ -52,4 +40,10 @@ export default {
       this.otherChecked = !this.otherChecked
     },
   },
+
+  computed: {
+    valid: function() {
+      return this.showValid
+    },
+  },
 }

js/mixins/form.js

@@ -37,8 +37,8 @@ export default {
     handleChildFieldChange: function(event) {
       // need to temporarily use this function because we will no longer be passing
       // parent_uid or watch from the child components
-      const { value, name, valid } = event
+      const { name, valid } = event
-      if (typeof this.fields[name] !== undefined) {
+      if (typeof this.fields[name] !== 'undefined') {
         this.fields[name] = valid
         this.changed = true
       }