Use form mixin for add field change handler

js/components/forms/details_of_use.js

@@ -1,12 +1,15 @@
 import createNumberMask from 'text-mask-addons/dist/createNumberMask'
 import { conformToMask } from 'vue-text-mask'
 
+import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 import optionsinput from '../options_input'
 
 export default {
   name: 'details-of-use',
 
+  mixins: [FormMixin],
+
   components: {
     textinput,
     optionsinput,
@@ -33,10 +36,6 @@ export default {
     }
   },
 
-  mounted: function () {
-    this.$root.$on('field-change', this.handleFieldChange)
-  },
-
   computed: {
     annualSpend: function () {
       const monthlySpend = this.estimated_monthly_spend || 0
@@ -60,12 +59,6 @@ export default {
     formatDollars: function (intValue) {
       const mask = createNumberMask({ prefix: '$', allowDecimal: true })
       return conformToMask(intValue.toString(), mask).conformedValue
-    },
-    handleFieldChange: function (event) {
-      const { value, name } = event
-      if (typeof this[name] !== undefined) {
-        this[name] = value
-      }
-    },
+    }
   }
 }

js/components/forms/financial.js

@@ -1,9 +1,12 @@
+import FormMixin from '../../mixins/form'
 import optionsinput from '../options_input'
 import textinput from '../text_input'
 
 export default {
   name: 'financial',
 
+  mixins: [FormMixin],
+
   components: {
     optionsinput,
     textinput,
@@ -24,18 +27,5 @@ export default {
     return {
       funding_type
     }
-  },
-
-  mounted: function () {
-    this.$root.$on('field-change', this.handleFieldChange)
-  },
-
-  methods: {
-    handleFieldChange: function (event) {
-      const { value, name } = event
-      if (typeof this[name] !== undefined) {
-        this[name] = value
-      }
-    },
   }
 }

js/components/forms/poc.js

@@ -1,3 +1,4 @@
+import FormMixin from '../../mixins/form'
 import optionsinput from '../options_input'
 import textinput from '../text_input'
 import checkboxinput from '../checkbox_input'
@@ -5,6 +6,8 @@ import checkboxinput from '../checkbox_input'
 export default {
   name: 'poc',
 
+  mixins: [FormMixin],
+
   components: {
     optionsinput,
     textinput,
@@ -26,18 +29,5 @@ export default {
     return {
         am_poc
     }
-  },
-
-  mounted: function () {
-    this.$root.$on('field-change', this.handleFieldChange)
-  },
-
-  methods: {
-    handleFieldChange: function (event) {
-      const { value, name } = event
-      if (typeof this[name] !== undefined) {
-        this[name] = value
-      }
-    },
   }
 }

js/mixins/form.js

@@ -0,0 +1,14 @@
+export default {
+  mounted: function () {
+    this.$root.$on('field-change', this.handleFieldChange)
+  },
+
+  methods: {
+    handleFieldChange: function (event) {
+      const { value, name } = event
+      if (typeof this[name] !== undefined) {
+        this[name] = value
+      }
+    },
+  }
+}