Refactor emit field change into a utility function

js/components/checkbox_input.js

@@ -1,3 +1,5 @@
+import { emitFieldChange } from '../lib/emitters'
+
 export default {
   name: 'checkboxinput',
 
@@ -7,11 +9,7 @@ export default {
 
   methods: {
     onInput: function(e) {
-      this.$root.$emit('field-change', {
+      emitFieldChange(this, { value: e.target.checked, name: this.name })
-        value: e.target.checked,
-        name: this.name,
-        parent_uid: this.$parent._uid,
-      })
     },
   },
 }

js/components/date_selector.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { getDaysInMonth } from 'date-fns'
+import { emitFieldChange } from '../lib/emitters'
 
 var paddedNumber = function(number) {
   if ((number + '').length === 1) {
@@ -135,11 +136,7 @@ export default {
 
   methods: {
     _emitChange: function(name, value, valid) {
-      this.$root.$emit('field-change', {
+      emitFieldChange(this, { value, name })
-        value,
-        name,
-        parent_uid: this.$parent && this.$parent._uid,
-      })
     },
   },
 

js/components/multi_checkbox_input.js

@@ -1,5 +1,6 @@
 import optionsinput from '../components/options_input'
 import textinput from '../components/text_input'
+import { emitFieldChange } from '../lib/emitters'
 
 export default {
   name: 'multicheckboxinput',
@@ -40,11 +41,7 @@ export default {
 
   methods: {
     onInput: function(e) {
-      this.$root.$emit('field-change', {
+      emitFieldChange(this, { value: e.target.value, name: this.name })
-        value: e.target.value,
-        name: this.name,
-        parent_uid: this.$parent._uid,
-      })
       this.showError = false
       this.showValid = true
     },

js/components/options_input.js

@@ -1,3 +1,5 @@
+import { emitFieldChange } from '../lib/emitters'
+
 export default {
   name: 'optionsinput',
 
@@ -21,11 +23,7 @@ export default {
 
   methods: {
     onInput: function(e) {
-      this.$root.$emit('field-change', {
+      emitFieldChange(this, { value: e.target.value, name: this.name })
-        value: e.target.value,
-        name: this.name,
-        parent_uid: this.$parent._uid,
-      })
       this.showError = false
       this.showValid = true
     },

js/components/text_input.js

@@ -1,6 +1,7 @@
 import MaskedInput, { conformToMask } from 'vue-text-mask'
 import inputValidations from '../lib/input_validations'
 import { formatDollars } from '../lib/dollars'
+import { emitFieldChange } from '../lib/emitters'
 
 export default {
   name: 'textinput',
@@ -124,11 +125,10 @@ export default {
       this.showValid = this.value != '' && valid
 
       // Emit a change event
-      this.$root.$emit('field-change', {
+      emitFieldChange(this, {
         value: this._rawValue(value),
         valid,
         name: this.name,
-        parent_uid: this.$parent._uid,
       })
     },
 

js/lib/emitters.js

@@ -0,0 +1,6 @@
+export const emitFieldChange = (el, data) => {
+  el.$root.$emit('field-change', {
+    ...data,
+    parent_uid: el.$parent && el.$parent._uid,
+  })
+}