<b-row>
<b-form-group class="col-md-12" id="input-group-12">
<h2 class="h2">Adding Attachments</h2>
<a
href="#"
class="plus-minus-toggle collapsed"
@click="addRow"
>
</a>
<table class="table">
<tbody>
<div class="container-fluid" style="padding-left:0">
<div class="row">
<tr
v-for="(row, index) in rows"
:key="index.toString()"
class="col-md-6 form-group form-group-block"
>
<td>
<b-form-file
v-model="row.id"
accept=".pdf"
placeholder="Select PDF file"
drop-placeholder="Drop file here..."
></b-form-file>
</td>
<td>
<a
@click="removeElement(index)"
class="plus-minus-toggle"
></a>
</td>
</tr>
</div>
</div>
</tbody>
</table>
<div></div>
</b-form-group>
</b-row>
export default {
components: { Multiselect /*pdf*/ },
data() {
return {
rows: [],
}
},
methods: {
addRow: function(event) {
event.preventDefault()
var elem = document.createElement('tr')
console.log(elem)
this.rows.push({
title: '',
description: '',
file: {
name: 'Select attachment'
}
})
},
removeElement: function(index) {
console.log(index)
/* if (index >= 0) {
}
index + 1
return false*/
this.rows.splice(index, 1)
index + 1
},
setFilename: function(event, row) {
//var file
/* if (event.target.files[0] !== 1) {
this.$refs.index.innerText = 'Vyberte přílohu'
return
}
*/
var file = event.target.files[0]
row.file = file
}
}
}
**I have the above code but facing an issue with deletion when using a standard input type text. The removeElement function is functioning correctly. I am unsure where the problem lies. Any suggestions or assistance would be greatly appreciated. I have now edited the code to include methods and data as well.**