evercode1 · February 12, 2017 23:24 · Feb 12, 2017
diff --git a/LessonCreateCategory.vue b/LessonCreateCategory.vue
@@ -0,0 +1,98 @@
+<template>
+    <div>
+
+        <!-- Category Select Form -->
+
+        <div class="form-group">
+
+            <label for="category_id">Category Name:</label>
+
+            <select @change="onChange($event.target.value)"
+                    class="form-control"
+                    name="category_id">
+
+                <option value="">Please Choose One</option>
+
+                <option  v-for="category in categories"
+                         v-bind:value="category.id"
+                         >{{ category.name }}</option>
+
+            </select>
+
+
+        </div>
+
+        <!-- Subcategory Select Form -->
+
+        <div class="form-group" v-if="category > 0">
+
+        <label for="subcategory_id">Subcategory Name:</label>
+
+        <select v-model="initialState" class="form-control" name="subcategory_id">
+
+            <option value="0">Please Choose One</option>
+
+            <option v-for="option in options"
+                    v-bind:value=" option.id ">
+                    {{ option.name }}</option>
+
+        </select>
+
+
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+
+    export default {
+
+        props: ['subcategories', 'categories'],
+
+        data () {
+
+            return {
+
+
+                category : '',
+
+                options: [],
+
+                initialState: 0
+                
+
+            }
+
+        },
+
+        methods: {
+
+            filterSubcategories () {
+
+                this.options = this.subcategories.filter(subcategories =>
+                subcategories.category_id == this.category);
+
+            },
+
+            onChange (value) {
+
+
+                this.category = value;
+
+                this.initialState = 0;
+
+
+                this.filterSubcategories();
+
+            }
+
+
+        }
+
+
+
+    }
+
+</script>