Emit field change event for options inputs

js/components/options_input.js

@@ -0,0 +1,16 @@
+export default {
+  name: 'optionsinput',
+
+  props: {
+    name: String
+  },
+
+  methods: {
+    onInput: function (e) {
+      this.$root.$emit('field-change', {
+        value: e.target.value,
+        name: this.name
+      })
+    }
+  }
+}

js/index.js

@@ -1,12 +1,14 @@
 import classes from '../styles/atat.scss'
 import Vue from 'vue/dist/vue'
 
+import optionsinput from './components/options_input'
 import textinput from './components/text_input'
 
 const app = new Vue({
   el: '#app-root',
   components: {
-    textinput
+    optionsinput,
+    textinput,
   },
   methods: {
     closeModal: function(name) {

templates/components/options_input.html

@@ -1,9 +1,10 @@
 {% from "components/icon.html" import Icon %}
 
 {% macro OptionsInput(field, inline=False) -%}
+  <optionsinput name='{{ field.name }}' inline-template>
     <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
 
-    <fieldset class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
+      <fieldset v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
         <legend>
           {{ field.label | striptags}}
 
@@ -27,6 +28,6 @@
       </fieldset>
     </div>
 
-
+  </optionsinput>
 
 {%- endmacro %}