|
@@ -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
|