如何使用 Vue.Js 从数组中删除上传的多个图像，并且应该从 UI 中删除该图像？

Question

I am uploading multiple images using VueJs. Saving their respective base64 values in Array (to store them in db). I have added remove feature there, while clicking on remove button I find the index of that element and splice it from the array.

The clicked image value being removed from array thats fine but it does not change the position of the image. Visually I can see the last image is deleted. How can I remove value of image from Array and remove same image from UI ?

Here is the code: https://codepen.io/echobinod/pen/GVMOqJ

<div id="app">
    <input type="file" multiple @change="onFileChange" /><br><br>
        <div class="row">
        <div v-for="(image, key) in images">
        <div class="col-md-4" :id="key">
        <button type="button" @click="removeImage(key)">
            &times;
        </button>
            <img class="preview img-thumbnail" v-bind:ref="'image' +parseInt( key )" /> 
            {{ image.name }}
        </div>
      </div>
    </div>
  </div>

<script>
const vm = new Vue({
  el: '#app',
  data() {
    return {
      images: [],
    }
  },
  methods: {
    onFileChange(e) {
      var selectedFiles = e.target.files;
      for (let i=0; i < selectedFiles.length; i++)
      {
        this.images.push(selectedFiles[i]);
      }
      for (let i=0; i<this.images.length; i++)
      {
            let reader = new FileReader(); //instantiate a new file reader
            reader.addEventListener('load', function(){
              this.$refs['image' + parseInt( i )][0].src = reader.result;
            }.bind(this), false);

        reader.readAsDataURL(this.images[i]);
       }
    },
    removeImage (i) { 
        var arrayImages = this.images;

        var index = arrayImages.indexOf(arrayImages[i]);

          arrayImages.splice(index, i);
    }
  }
})
</script>

Answer 1

You need to force the component to reload, updating the data does not mean that the UI will change. to do this the best way imo is to put a key on whatever you need to reload, I think that would be here:

<div v-for="(image, key) in images" :key="reloadKey">
...
data(){
  return {
    reloadKey: 0}}
...
removeImage (i) { 
        var arrayImages = this.images;

        var index = arrayImages.indexOf(arrayImages[i]);

          arrayImages.splice(index, i);
this.reloadKey++
    }
  }

See here for further reading: https://michaelnthiessen.com/force-re-render

Answer 2

One of the good things about Vuejs is that it provides two way data binding between the dom and your data. That means that when you change the images array defined in data the UI will automagically reflect the changes.

As a quick fix, after filling the arrayImages array, assign this.images = arrayImages and the UI should update correspondingly.

Answer 3

How about you use,

arrayImages.splice(index, 1);

Instead of using i in the splice

arrayImages.splice(index, i);