select + @change + emit

components/instructor/LandingPage.vue

@@ -42,9 +42,15 @@
         <div class="field">
           <label class="label">Category</label>
           <div class="select is-medium">
-            <select>
-              <option value="default">Select Category</option>
-              <!-- <option> </option> -->
+            <select
+              :value="course.category._id"
+              @change="($event) => emitCourseValue($event, 'category')">
+              <!-- <option value="default">Select Category</option> -->
+              <option
+                v-for="category in categories"
+                :key="category._id"
+                :value="category._id"
+              >{{category.name}}</option>
             </select>
           </div>
         </div>
@@ -104,9 +110,22 @@ export default {
       required : true
     }
   },
+  computed : {
+    categories() {
+      return this.$store.state.category.items
+    }
+  },
   methods : {
     emitCourseValue(e, field){
-      this.$emit('courseValueUpdated', {value : e.target.value, field})
+      const {value} = e.target
+      if(field === 'category'){
+        return this.emitCategory(value, field)
+      }
+      this.$emit('courseValueUpdated', {value, field})
+    },
+    emitCategory(categoryId, field){
+      const foundCategory = this.categories.find(c => c._id === categoryId)
+      this.$emit('courseValueUpdated', {value : foundCategory, field})
     }
   }
 }

pages/instructor/course/_id/manage.vue

@@ -106,8 +106,11 @@ export default {
   },
   async fetch({store, params}) {
     console.log('course/_id/manage.vue fetch call')
-    const result = await store.dispatch('instructor/course/fetchCourseById', params.id)
-    console.log('course/_id/manage.vue fetch done', result)
+    await store.dispatch('instructor/course/fetchCourseById', params.id)
+    console.log('course/_id/manage.vue fetch done')
+    console.log('course/_id/manage.vue category/fetchCategories call')
+    await store.dispatch('category/fetchCategories')
+    console.log('course/_id/manage.vue category/fetchCategories done')
   },
   computed: {
     ...mapState({