nested checkbox component

js/components/checkbox_input.js

@@ -1,10 +1,11 @@
 import { emitEvent } from '../lib/emitters'
+import nestedcheckboxinput from './nested_checkbox_input'
 
 export default {
   name: 'checkboxinput',
 
   components: {
-    checkboxinput: this,
+    nestedcheckboxinput,
   },
 
   props: {
@@ -14,7 +15,7 @@ export default {
 
   data: function() {
     return {
-      checked: this.initialChecked,
+      isChecked: this.initialChecked,
     }
   },
 

js/components/nested_checkbox_input.js

@@ -0,0 +1,31 @@
+import { emitEvent } from '../lib/emitters'
+
+export default {
+  name: 'nestedcheckboxinput',
+
+  props: {
+    name: String,
+    isParentChecked: Boolean,
+  },
+
+  data: function() {
+    return {
+      isChecked: false,
+    }
+  },
+
+  updated: function() {
+    if (!this.isParentChecked) {
+      this.isChecked = false
+    }
+  },
+
+  methods: {
+    onInput: function(e) {
+      emitEvent('field-change', this, {
+        value: e.target.checked,
+        name: this.name,
+      })
+    },
+  },
+}

js/index.js

@@ -11,6 +11,7 @@ import optionsinput from './components/options_input'
 import multicheckboxinput from './components/multi_checkbox_input'
 import textinput from './components/text_input'
 import checkboxinput from './components/checkbox_input'
+import nestedcheckboxinput from './components/nested_checkbox_input'
 import EditOfficerForm from './components/forms/edit_officer_form'
 import poc from './components/forms/poc'
 import oversight from './components/forms/oversight'
@@ -74,6 +75,7 @@ const app = new Vue({
     KoReview,
     BaseForm,
     DeleteConfirmation,
+    nestedcheckboxinput,
   },
 
   mounted: function() {