Cleaning up checkbox code

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'
 
@@ -26,20 +25,14 @@ export default {
 
 
   data: function () {
-    const showError = (this.initialErrors && this.initialErrors.length) || false
+    const showError = (this.initialErrors && this.initialValue.length > 0) || false
     return {
       showError: showError,
       showValid: !showError && !!this.initialValue,
       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.setSelection()
     }
   },
 
@@ -55,6 +48,11 @@ export default {
     otherToggle: function() {
       this.otherChecked = !this.otherChecked
       this.otherText = ''
+    },
+    setSelection: function () {
+      for (let choice of this.initialValue) {
+        this.selections.push(choice)
+      }
     }
   }
 }

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
-    }
-  }
-}

templates/components/multi_checkbox_input.html

@@ -33,7 +33,7 @@
             <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>
+              <label for='{{ field.name }}-{{ loop.index }}'>{{ 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>