javascript - 将输入类型文件渲染为Vue组件中的列表

Question

我创建了一个组件来添加多个带有标题的文档和一个删除按钮来删除一个文档。我在文档变量上使用了数据绑定。一切正常，但删除的文件字段无法正常工作。假设用户添加了三行。

A | a.pdf | Delete

B | b.pdf | Delete

C | c.pdf | Delete

当第二行被删除结果应该是

A | a.pdf | Delete
        
C | c.pdf | Delete

但结果是

A | a.pdf | Delete
        
C | b.pdf | Delete

注意 C 行有 b.pdf 而不是 c.pdf。

这是我的组件代码：

<template>
    <div>
        <div v-for="(document, index) in documents" class="row" :key="index">
            <fieldset>
                <div class="form-group">
                  <label>Title</label>
                  <input type="text" :name="`document[${index}][title]`" v-model="document.name" pattern="[A-Za-z\s0-9]+" required/>
                </div>
                <div>
                  <input type="file" :name="`document[${index}][file]`" class="form-control document-file" />
                </div>
                <div>
                    <button @click="deletedoc(index)"> Delete </button>
                </div>
            </fieldset>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group pull-right mt-10">
                    <button class="btn btn-info btn-sm" @click.prevent.stop="documents.push({active: 1})">
                        Add Document
                    </button>
                </div>
            </div>
        </div>
    </div>

</template>


<script>

  export default {

    props: {
      list: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    data() {
      return {
        documents: [],

      };
    },
    mounted() {
      this.documents = this.list;
    },
    beforeUpdate(){
      console.log(this.documents);
    },
    methods: {
      deletedoc(index){
        console.log(index);
        this.documents.splice(index, 1)
      },
      showConfirm(index) {

        if (this.documents[index].id !== undefined) {
          this.$set(this.documents[index], 'confirm', true);
        } else {
          this.documents.splice(index, 1);
        }
      }
    }

  };
</script>
<style>
fieldset{display: flex; margin-bottom: 20px;}
</style>

编辑1：

沙盒链接 https://codesandbox.io/s/dreamy-breeze-msv4n?file=/src/components/HelloWorld.vue

标签： javascriptvuejs2