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

Question

我正在使用 VueJs 上传多个图像。保存各自的数组中的 base64 值(将它们存储在数据库中)。我在那里添加了删除功能，当单击删除按钮时，我找到该元素的索引并将其从数组中拼接起来。

从数组中删除单击的图像值，这很好，但它不会改变图像的位置。从视觉上我可以看到最后一张图像已被删除。如何从数组中删除图像的值并从 UI 中删除相同的图像？

代码如下: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

你需要强制组件重新加载，更新数据并不意味着UI会改变。要做到这一点，我认为最好的方法是将 key 放在您需要重新加载的任何内容上，我认为这将在这里:

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

请参阅此处进一步阅读: https://michaelnthiessen.com/force-re-render