Update > keep-alive component 이벤트 처리 사용법

components/instructor/LandingPage.vue

@@ -9,6 +9,8 @@
           <label class="label">Course title</label>
           <div class="control">
             <input
+              :value="course.title"
+              @input="($event) => emitCourseValue($event, 'title')"
               class="input is-medium"
               type="text"
               placeholder="Dart and Flutter From Zero to Hero ">
@@ -18,6 +20,8 @@
           <label class="label">Course subtitle</label>
           <div class="control">
             <input
+              :value="course.subtitle"
+              @input="($event) => emitCourseValue($event, 'subtitle')"
               class="input is-medium"
               type="text"
               placeholder="Build real mobile Application for Android and iOS.">
@@ -27,6 +31,8 @@
           <label class="label">Course description</label>
           <div class="control">
             <textarea
+              :value="course.description"
+              @input="($event) => emitCourseValue($event, 'description')"
               class="textarea is-medium"
               type="text"
               placeholder="Write something catchy about the course">
@@ -48,12 +54,14 @@
             <div class="column">
               <figure class="image is-4by2">
                 <img
-                  :src="''">
+                  :src="course.image">
               </figure>
             </div>
             <div class="column centered">
               <div class="control">
                 <input
+                  :value="course.image"
+                  @input="($event) => emitCourseValue($event, 'image')"
                   class="input is-medium"
                   type="text"
                   placeholder="https://images.unsplash.com/photo-1498837167922-ddd27525d352">
@@ -65,6 +73,8 @@
           <label class="label">Course Link</label>
           <div class="control">
             <input
+              :value="course.productLink"
+              @input="($event) => emitCourseValue($event, 'productLink')"
               class="input is-medium"
               type="text"
               placeholder="https://www.udemy.com/vue-js-2-the-full-guide-by-real-apps-vuex-router-node">
@@ -74,6 +84,8 @@
           <label class="label">Course Video Link</label>
           <div class="control">
             <input
+              :value="course.promoVideoLink"
+              @input="($event) => emitCourseValue($event, 'promoVideoLink')"
               class="input is-medium"
               type="text"
               placeholder="https://www.youtube.com/watch?v=WQ9sCAhRh1M">
@@ -82,4 +94,20 @@
       </form>
     </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>

pages/instructor/course/_id/manage.vue

@@ -68,7 +68,8 @@
             <Price/>
             <Status/> -->
             <keep-alive>
-              <component 
+              <component
+              @courseValueUpdated="handleCourseUpdate"
               :is="activeComponent"
               :course="course"/>
             </keep-alive>
@@ -112,6 +113,11 @@ export default {
     ...mapState({
       course: ({instructor}) => instructor.course.item
     })
+  },
+  methods: {
+    handleCourseUpdate({value, field}){
+      this.$store.dispatch('instructor/course/updateCourseValue', {field, value})
+    }
   }
 }
 </script>

store/instructor/course.js

@@ -43,6 +43,9 @@ export const actions = {
   updateLine({commit}, {index, value, field}) {
     commit('setLineValue', {index, value, field})
     // Surprise commit for next lectures (:
+  },
+  updateCourseValue({commit}, {value, field}) {
+    commit('setCourseValue', {value, field})
   }
 }
 
@@ -67,5 +70,8 @@ export const mutations = {
     console.log('course.js mutations call setLineValue params > ', {index, value, field})
     state.item[field][index].value = value
     console.log('course.js mutations done setLineValue params')
+  },
+  setCourseValue(state, {value, field}){
+    state.item[field] = value
   }
 }