Replacing files in input using Vue.js

Question

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.

tony19 · Accepted Answer · 2022-07-16 01:33:26Z

1

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.

edited Jul 16, 2022 at 1:33

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 2, 2018 at 6:51

Dencio

5413 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ilia Levikov Over a year ago

well, it's kinda same. But i think the problem is that this.documents[index].document is object Object and event.target.files[0] is object File

Dencio Over a year ago

I think the item should be changed if set properly.

Collectives™ on Stack Overflow

Replacing files in input using Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related