Here is the HTML and Vue.js code that I have:
<table class="table">
<thead>
<tr>
<td><strong>Title</strong></td>
<td><strong>Description</strong></td>
<td><strong>File</strong></td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows">
<td><input type="text" v-model="row.title"></td>
<td><input type="text" v-model="row.description"></td>
<td>
<label class="fileContainer">
{{row.file.name}}
<input type="file" @change="setFilename($event, row)" :id="index">
</label>
</td>
<td>
<a v-on:click="removeElement(index);" style="cursor: pointer">Remove</a>
</td>
</tr>
</tbody>
</table>
Upon clicking 'Add', a table row will be added to the table body
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
</div>
Below are the methods for adding or removing a row:
methods: {
addRow: function() {
var elem = document.createElement('tr');
this.rows.push({
title: "",
description: "",
file: {
name: 'Choose File'
}
});
},
removeElement: function(index) {
this.rows.splice(index, 1);
},
setFilename: function(event, row) {
var file = event.target.files[0];
row.file = file
}
}
If I were to use a custom div instead of a table, how can I add the dynamic form to a specific div? All examples that I've seen involve using createElement. Is there a way to add the dynamic form to a specific div with a unique id?