Update components > select 태그 값변경 이벤트 사용법

components/instructor/Price.vue

@@ -8,6 +8,8 @@
         <label class="label">Price of the course</label>
         <div class="control">
           <input
+            :value="course.price"
+            @input="($event) => emitCourseValue($event, 'price')"
             class="input is-medium"
             type="text"
             placeholder="179.99">
@@ -17,6 +19,8 @@
         <label class="label">Discounted Price for the course</label>
         <div class="control">
           <input
+            :value="course.discountedPrice"
+            @input="($event) => emitCourseValue($event, 'discountedPrice')"
             class="input is-medium"
             type="text"
             placeholder="9.99">
@@ -24,4 +28,19 @@
       </div>
     </div>
   </div>
-</template>
+</template>
+<script>
+export default {
+  props: {
+    course : {
+      type : Object,
+      required : true
+    }
+  },
+  methods : {
+    emitCourseValue(e, field){
+      this.$emit('courseValueUpdated', {value : e.target.value, field})
+    }
+  }
+}
+</script>

components/instructor/Status.vue

@@ -7,7 +7,9 @@
       <div class="field">
         <label class="label">Status</label>
         <div class="select is-medium">
-          <select>
+          <select 
+            :value="course.status"
+            @change="($event) => emitCourseValue($event, 'status')">
             <option value="default">Change Status</option>
             <option value="active">
               Active
@@ -20,4 +22,19 @@
       </div>
     </div>
   </div>
-</template>
+</template>
+<script>
+export default {
+  props: {
+    course: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    emitCourseValue(e, field) {
+      this.$emit('courseValueUpdated', {value: e.target.value, field})
+    }
+  }
+}
+</script>