使用 Vue.js 替換輸入中的文件

Question

我有 Vue.js 模板文件，其中包含包含文檔的數據。 我的頁面有表格。 表有輸入按鈕上傳文件的行，像這樣

<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>

因此，有些行可能包含一些文件，而有些則不包含。 但是按鈕應該替換或添加文件到該行。 所以我寫了方法：

methods: {
  replaceDoc (event, index) {
    this.documents[index] = event.target.files[0]
  },

但它似乎不包含任何數據，當我試圖將它發送到服務器時，它會發送空字典。

Answer 1

您是否嘗試過使用Vue.set or this.$set

代替：

this.documents[index] = event.target.files[0]

嘗試這個：

this.$set(this.documents, index, event.target.files[0]);

或者

Vue.set(this.documents, index, event.target.files[0]);

你可以參考這個API 。