vue 2.x
У меня есть массив файлов, каждый элемент содержит ввод файла, а также ввод другого текста, пользователь может щелкнуть значок +, чтобы добавить элемент и загрузить один файл или удалить один элемент.
это выглядит следующим образом:
однако, если я добавлю два элемента, и у каждого элемента будет файл, затем я удаляю первый элемент, входной файл (исходный второй элемент) тоже будет очищен как:
, то есть:
Level A a.pdf
Level B b.pdf
если я сначала удалю, то изменится на
Level B no file selected
почему? как это решить?
мой vue код:
<tr v-for=" (a, index) in eb.attachmentList" v-bind:key="index">
<td>
<select v-model="a.typeId" required>
<option value="1">Level A</option>
<option value="13">Level B</option>
<option value="8">Level C</option>
</select>
</td>
<td><input type="text" v-model="a.description" /></td>
<td>
<input v-if="!a.eaId" type="file" v-on:change="selectFile(index, $event)" ref="f" required />
<a v-if="a.eaId" href="#" v-on:click="downloadFile(a)">{{a.fileName}}</a>
</td>
<td><i class="far fa-trash-alt fa-lg" v-on:click="delAttachment(a, index)" style="color: red"></i>
</td>
</tr>
data () {
return {
eb: {
'attachmentList': []
}
}
},
methods: {
addAttachment() {
var a = {'typeId': '', 'description': '', 'file': ''};
this.eb.attachmentList.push(a);
},
selectFile( index, e ){
this.eb.attachmentList[index].file = e.target.files[0];
},
delAttachment( a, index ) {
this.eb.attachmentList.splice(index, 1);
//and delete this attachment from database
}
}