Browse Source

조건 computed 추가 key 를 value to index

허용운 5 years ago
parent
commit
f5e78dcca6
1 changed files with 21 additions and 4 deletions
  1. 21 4
      components/form/MultiLineTextInput.vue

+ 21 - 4
components/form/MultiLineTextInput.vue

@@ -5,11 +5,11 @@
     <!-- Iterate lines here -->
     <div class="multi-field field"
       v-for="(line, index) in lines"
-      :key="line.value">
+      :key="line.index">
       <div class="control multi-control">
         <div class="multi-input-container">
           <input
-            @input="emitUpdate($event, index)"
+            @input.prevent="emitUpdate($event, index)"
             :value="line.value"
             placeholder="Add Something Nice (:"
             class="input is-medium multi-input"
@@ -48,12 +48,29 @@ export default {
       required: true
     }
   },
+  computed: {
+    lastLine() {
+      return this.lines[this.lines.length - 1]
+    },
+    hasLines() {
+      return this.lines.length > 0
+    },
+    hasLastLineValue() {
+      return this.lastLine && this.lastLine.value !== ''
+    },
+    canDeleteLine() {
+      return this.lines.length > 1
+    },
+    canAddLine() {
+      return this.hasLines && this.hasLastLineValue
+    }
+  },
   methods: {
     emitAdd() {
-      this.$emit('addClicked')
+      this.canAddLine && this.$emit('addClicked')
     },
     emitRemove(index) {
-      this.$emit('removeClicked', index)
+      this.canDeleteLine && this.$emit('removeClicked', index)
     },
     emitUpdate(event, index){
       const {value} = event.target