vue.js rookie, is trying to do a multi-image preview delete and upload function, has achieved a single image upload preview, deletion also encountered some problems, I hope Daniel guide the confusion, attach the html,vue.js code.
main problem: when selecting multiple image previews, only a single image is displayed. When deleting a single image, I don"t know how to get the index of the picture. I have tried to use vmurfort, but adding vMuffor = "(key,image) in images" image preview in < div class= "col-sm-10" > is not successful
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="-sharp"
                            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;iPP){
            var reader = new FileReader();
            var uploadFile  = document.getElementById("uploadFile").files[0];
            reader.readAsDataURL(uploadFile);
            reader.onload =function(e){
                  $("-sharppic").attr("src", e.target.result);
            };                 
        }
    },
    delImage:function(index){
        this.images.shift(index);
        
    },
    removeImage: function(e) {

/ / this.images = [];

        $("-sharppic").remove();
    },