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

【问题标题】：How to remove uploaded multiple images from array using Vue.Js and it should delete that image from UI?如何使用 Vue.Js 从数组中删除上传的多个图像，它应该从 UI 中删除该图像？
【发布时间】：2019-12-12 16:07:30
【问题描述】：

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

从数组中删除的单击图像值很好，但它不会改变图像的位置。视觉上我可以看到最后一张图片被删除了。如何从 Array 中删除图像的值并从 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>

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

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

<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

【讨论】：

【解决方案2】：

Vuejs 的优点之一是它在 dom 和您的数据之间提供了两种数据绑定方式。这意味着当您更改data 中定义的images 数组时，UI 将自动反映更改。

作为一个快速修复，在填充arrayImages 数组后，分配this.images = arrayImages 并且UI 应该相应地更新。

【讨论】：

【解决方案3】：

你用的怎么样，

arrayImages.splice(index, 1);

而不是在拼接中使用 i

arrayImages.splice(index, i);

【讨论】：