Merge pull request #526 from dod-ccpo/checkbox-fixes

Checkbox fixes

js/components/multi_checkbox_input.js

@@ -1,4 +1,3 @@
-import otherinput from '../components/other_input'
 import optionsinput from '../components/options_input'
 import textinput from '../components/text_input'
 
@@ -6,7 +5,6 @@ export default {
   name: 'multicheckboxinput',
 
   components: {
-    otherinput,
     optionsinput,
     textinput,
   },
@@ -29,17 +27,11 @@ export default {
     const showError = (this.initialErrors && this.initialErrors.length) || false
     return {
       showError: showError,
-      showValid: !showError && !!this.initialValue,
+      showValid: !showError && this.initialValue.length > 0,
       validationError: this.initialErrors.join(' '),
       otherChecked: this.initialValue.includes("other") ? true : this.otherChecked,
       otherText: this.initialOtherValue,
-      selections: []
-    }
-  },
-
-  mounted: function () {
-    for (let choice of this.initialValue) {
-      this.selections.push(choice)
+      selections: this.initialValue
     }
   },
 
@@ -55,6 +47,6 @@ export default {
     otherToggle: function() {
       this.otherChecked = !this.otherChecked
       this.otherText = ''
-    }
+    },
   }
 }

js/components/other_input.js

@@ -1,29 +0,0 @@
-import FormMixin from '../mixins/form'
-import textinput from '../components/text_input'
-
-export default {
-  name: 'otherinput',
-
-  mixins: [FormMixin],
-
-  components: {
-    textinput,
-  },
-
-  props: {
-    initialData: {
-      type: Array,
-      default: () => ({})
-    }
-  },
-
-  data: function () {
-    const {
-      other = true
-    } = this.initialData
-
-    return {
-        other
-    }
-  }
-}

js/index.js

@@ -7,7 +7,6 @@ import VTooltip from 'v-tooltip'
 
 import optionsinput from './components/options_input'
 import multicheckboxinput from './components/multi_checkbox_input'
-import otherinput from './components/other_input'
 import textinput from './components/text_input'
 import checkboxinput from './components/checkbox_input'
 import DetailsOfUse from './components/forms/details_of_use'
@@ -40,7 +39,6 @@ const app = new Vue({
     toggler,
     optionsinput,
     multicheckboxinput,
-    otherinput,
     textinput,
     checkboxinput,
     DetailsOfUse,

templates/components/multi_checkbox_input.html

@@ -32,11 +32,11 @@
           {% for choice in field.choices %}
             <li>
               {% if choice[0] != 'other' %}
-              <input type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ field.choices.index(choice) }}' value='{{ choice[0] }}' v-model="selections"/>
-              <label for='{{ field.name }}-{{ field.choices.index(choice) }}'>{{ choice[1] }}</label>
+              <input type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ loop.index0 }}' value='{{ choice[0] }}' v-model="selections"/>
+              <label for='{{ field.name }}-{{ loop.index0 }}'>{{ choice[1] }}</label>
               {% else %}
-                <input @click="otherToggle" type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ field.choices.index(choice) }}' value='other' v-model="selections"/>
-                <label for='{{ field.name }}-{{ field.choices.index(choice) }}'>{{ choice[1] }}</label>
+                <input @click="otherToggle" type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ loop.index0 }}' value='other' v-model="selections"/>
+                <label for='{{ field.name }}-{{ loop.index0 }}'>{{ choice[1] }}</label>
 
                 <div v-show="otherChecked">
                   <input type='text' name='{{ other_input_field.name}}' id='{{ field.name }}-other'  v-bind:value="otherText" aria-expanded='false' />