diff --git a/js/components/checkbox_input.js b/js/components/checkbox_input.js index d4dc3397..604dd355 100644 --- a/js/components/checkbox_input.js +++ b/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', { - value: e.target.checked, - name: this.name, - parent_uid: this.$parent._uid, - }) + emitFieldChange(this, { value: e.target.checked, name: this.name }) }, }, } diff --git a/js/components/date_selector.js b/js/components/date_selector.js index d3d6ff56..df1142b1 100644 --- a/js/components/date_selector.js +++ b/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', { - value, - name, - parent_uid: this.$parent && this.$parent._uid, - }) + emitFieldChange(this, { value, name }) }, }, diff --git a/js/components/multi_checkbox_input.js b/js/components/multi_checkbox_input.js index 2bf03e07..44a8c184 100644 --- a/js/components/multi_checkbox_input.js +++ b/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', { - value: e.target.value, - name: this.name, - parent_uid: this.$parent._uid, - }) + emitFieldChange(this, { value: e.target.value, name: this.name }) this.showError = false this.showValid = true }, diff --git a/js/components/options_input.js b/js/components/options_input.js index 6f60d529..085212e5 100644 --- a/js/components/options_input.js +++ b/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', { - value: e.target.value, - name: this.name, - parent_uid: this.$parent._uid, - }) + emitFieldChange(this, { value: e.target.value, name: this.name }) this.showError = false this.showValid = true }, diff --git a/js/components/text_input.js b/js/components/text_input.js index 93609841..51972d82 100644 --- a/js/components/text_input.js +++ b/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, }) }, diff --git a/js/lib/emitters.js b/js/lib/emitters.js new file mode 100644 index 00000000..8bed5096 --- /dev/null +++ b/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, + }) +}