스프레드 문법 const {value} = event.target 사용법

components/form/MultiLineTextInput.vue

@@ -9,6 +9,7 @@
       <div class="control multi-control">
         <div class="multi-input-container">
           <input
+            @input="emitUpdate($event, index)"
             :value="line.value"
             placeholder="Add Something Nice (:"
             class="input is-medium multi-input"
@@ -53,6 +54,10 @@ export default {
     },
     emitRemove(index) {
       this.$emit('removeClicked', index)
+    },
+    emitUpdate(event, index){
+      const {value} = event.target
+      this.$emit('valueUpdated', {value, index})
     }
   }
 }

components/instructor/TargetStudents.vue

@@ -6,12 +6,14 @@
     <div class="card-content card-section">
       <form>
         <multi-line-text-input
+          @valueUpdated="updateLine($event, 'wsl')"
           @addClicked="addLine('wsl')"
           @removeClicked="removeLine($event, 'wsl')"
           :lines="course.wsl"
           label="What will students learn"
         />
         <multi-line-text-input
+          @valueUpdated="updateLine($event, 'requirements')"
           @addClicked="addLine('requirements')"
           @removeClicked="removeLine($event, 'requirements')"
           :lines="course.requirements"
@@ -45,6 +47,9 @@ export default {
       console.log('Removing line of index:', index)
       console.log('Removing line for:', field)
       this.$store.commit('instructor/course/removeLine', {field, index})
+    },
+    updateLine({value, index}, field) {
+      this.$store.dispatch('instructor/course/updateLine', {field, value, index})
     }
   }
 }

store/instructor/course.js

@@ -40,6 +40,10 @@ export const actions = {
       return error
     }
   },
+  updateLine({commit}, {index, value, field}) {
+    commit('setLineValue', {index, value, field})
+    // Surprise commit for next lectures (:
+  }
 }
 
 export const mutations = {
@@ -58,5 +62,10 @@ export const mutations = {
     console.log('course.js mutations call removeLine params > ', field, ':', index)
     state.item[field].splice(index, 1)
     console.log('course.js mutations done removeLine params')
+  },
+  setLineValue(state, {index, value, field}) {
+    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')
   }
 }