vue.js删除预览图片无效问题。

Question

vue.js小白，正在尝试做一个多图预览删除并上传的功能，已经实现了单图上传预览，删除还遇到些问题，希望大牛们指点迷津，附上html,vue.js的代码。
主要问题：选择多图预览时只显示单图，删除单图时不知道如何获取图片的索引，尝试用过v-for，但是在<div class="col-sm-10">中加上v-for="(key,image) in images"图片预览就不成功
html:

            <div class="form-group">
                <div class="col-sm-2 control-label">图片预览</div>
                <div class="col-sm-10">
                    <img src="image" id="pic" style="height: 267px; width: 267px;"/>
                    <a href="#"
                            style="position: absolute;" @click='delImage(key)'> 
                            <span class="glyphicon glyphicon-remove"></span>
                    </a>
                    <button @click="removeImage">移除全部图片</button>
                    <button @click='uploadImage'>上传</button>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-2 control-label">图片上传</div>
                <div class="col-sm-10">
                <input type="file" id="uploadFile" name="uploadFile" @change="onFileChange" multiple="multiple" class="form-control" >
                </div>
            </div>

vue.js：

    onFileChange(e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length)
        return; 
        this.createImage(files);
    },
    createImage(file) {
        var image = new Image();         
        var vm = this;
        var leng=file.length;
        for(var i=0;i<leng;i++){
            var reader = new FileReader();
            var uploadFile  = document.getElementById("uploadFile").files[0];
            reader.readAsDataURL(uploadFile);
            reader.onload =function(e){
                  $("#pic").attr("src", e.target.result);
            };                 
        }
    },
    delImage:function(index){
        this.images.shift(index);
        
    },
    removeImage: function(e) {

// this.images = [];

        $("#pic").remove();
    },

Answer 1

1.先创建一个全局变量，用于存储与图片有关的信息。

this.imgs = [];

2.在createImage()方法中，每次选择图片后对imgs进行设置。

for () {
  this.imgs.push({
    file: files[i],
    dataUrl: e.target.result
  });
}

——————能完成这一步，之后就简单了。———————

3.比如要预览全部图片。

<div v-for="img in imgs">
  <img />
  <button />
</div>

4.比如删除某张图片。

removeImg(index) {
  this.imgs.splice(index, 1);
}

5.最后要整体上传。

let formData = new FormData();
this.imgs.forEach((img, i) => {
  formData.appendData('img' + i, img);
});

Answer 2

楼上说得很详细了，我只好来找点问题

1. 最好不要vue和jquery混用
2. shift(index)是什么鬼,应该是splice(index,1)吧