I have a Vue.js template file that includes data containing various documents. Within the page, there is a table with rows that feature upload file input buttons, structured like this:
<tr v-for="(doc, index) in documents">
<td :id="'doc-' + doc.id" v-show="doc.visible">
<div class="row">
<div class="col-md-9">
<a v-if="doc.document" :href="doc.document.file" v-text="doc.name"></a>
<div v-else v-text="doc.name"></div>
</div>
<div class="col-md-3">
<div class="row">
<div v-if="doc.document" class="col-md-8">
<label :for="'upload_doc_' + doc.id">
<span class="glyphicon glyphicon-upload text-primary" role="button"> Upload</span>
<input type="file"
:id="'upload_doc_' + doc.id"
class="hidden"
@change="replaceDoc($event, index)"
/>
</label>
</div>
</div>
</div>
</div>
</td>
Some rows may have files while others might not. However, the button should replace or add a file to the specific row. I created a method for this functionality:
methods: {
replaceDoc (event, index) {
this.documents[index] = event.target.files[0]
},
Unfortunately, when attempting to send this data to the server, it appears to be empty and only sends an empty dictionary.