Loader of individual files with VUE.JS doesn't work

问题

I am trying to mount a separate file loader with vue.js.

Each loader can load only one file.

According to the following code, the objective should be that in the structure 'adjuntos' each loaded file get saved properly.

But it doesn't work.

I have mounted an example in JSFiddle.

https://jsfiddle.net/JLLMNCHR/09qtwbL6/74/

Also here is the code:

<div id="app">

    <ul v-for="index in numAdjuntos" v-bind:id="index" v-bind:key="index">

        <li>

            <label>File {{index}}</label>
            <input v-if="adjuntos[index].length == 0" :disabled="true" />
            <span v-for="item in adjuntos[index]" v-bind:key="item.name">
                <input :disabled="true" v-bind:value="item.name" />
            </span>
            <input type="file" ref="adjuntosTemp" @ change="previewAdjuntos(index)"
                accept=".pdf" />

            <button v-on:click="aniadir_adjunto()">Add</button>
            <button v-if="index > 1" v-on:click="eliminar_adjunto(index)">Delete</button>

        </li>

    </ul>
  
  <br>
  
  <button v-on:click="displayFiles">
    Display
  </button>

</div>

new Vue({
  el: "#app",
  data: {
    numAdjuntos: 1,
    adjuntos: [{files: ''}, {files: ''}],    
  },
  methods: {
    previewAdjuntos(index) {
        this.adjuntos[index] = this.$refs.adjuntosTemp.files;       
    },
        aniadir_adjunto: function() {
            this.numAdjuntos += 1;
            this.adjuntos.push({files: ''});    
        },
        eliminar_adjunto: function(index) {
            this.numAdjuntos -= 1;
            this.adjuntos.splice(index, 1);
        },
    displayFiles() {
        for (var i = 0; i < this.numAdjuntos; i++) {
            console.log(i + ": " + this.adjuntos[i].files[0].name);
      }
    },
    
  }
})

Any help will be appreciated

来源：https://stackoverflow.com/questions/64044269/loader-of-individual-files-with-vue-js-doesnt-work