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,32 +1,33 @@
 {% from "components/icon.html" import Icon %}
 
 {% macro OptionsInput(field, inline=False) -%}
-  <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
+  <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>
+        <legend>
-        {{ field.label | striptags}}
+          {{ field.label | striptags}}
 
-        {% if field.description %}
+          {% if field.description %}
-          <span class='usa-input__help'>{{ field.description | safe }}</span>
+            <span class='usa-input__help'>{{ field.description | safe }}</span>
-        {% endif %}
+          {% endif %}
+
+          {% if field.errors %}
+            {{ Icon('alert') }}
+          {% endif %}
+        </legend>
+
+        {{ field() }}
 
         {% if field.errors %}
-          {{ Icon('alert') }}
+          {% for error in field.errors %}
+            <span class='usa-input__message'>{{ error }}</span>
+          {% endfor %}
         {% endif %}
-      </legend>
-
-      {{ field() }}
-
-      {% if field.errors %}
-        {% for error in field.errors %}
-          <span class='usa-input__message'>{{ error }}</span>
-        {% endfor %}
-      {% endif %}
-
-    </fieldset>
-  </div>
 
+      </fieldset>
+    </div>
 
+  </optionsinput>
 
 {%- endmacro %}