I have Vue.js template file with data that contains documents. My page has table. Table has rows with input buttons upload file, 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>
So, some rows may contain some files and some not. But button should replace or add file to the row. So i wrote method:
methods: {
replaceDoc (event, index) {
this.documents[index] = event.target.files[0]
},
But it seems that it does not contain any data, when I'm trying to send it to server it sends empty dictionary.
Have you tried using Vue.set or this.$set
Instead of:
this.documents[index] = event.target.files[0]
Try this:
this.$set(this.documents, index, event.target.files[0]);
OR
Vue.set(this.documents, index, event.target.files[0]);
You can refer to this API .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.