关于vue2,v-for渲染列表以及删除的问题;

Question

有一个上传组件,当图片上传完后,向数组push一个新的值,当点击右上角的×时splice当前点击的组件,问题是点击第二个时把最后一个删了,但是数组删的没错图片如下

代码:

<div is="user-upload" @upload-finish="userFinish" @input-finish="inputFinish" @close="close(index)" v-for="(v, index) in userIndex" :name="index"></div>

userFinish(user) { //每个参加用户上传图片完成后的回调
    let len = this.userIndex.length;
    let num = this.userIndex[len - 1] + 1;
    this.userIndex.push(num);
},
  
close(index) {
    this.userIndex.splice(index, 1);
},

Answer 1

找到问题了,用v-for遍历渲染3个组件没错,此时索引为0,1,2,就是在数组删除时,数组的索引还是为0,1所以就渲染了前面两个

Answer 2

v-for循环的时候,肯定有跟angular循环时一样的索引$index,告诉列表属于第几个.你直接在×所在的标签上绑定close({{$index}})事件 [vue没用过,但是索引应该是类似的],这样就可以直接得到图片对应在数组的索引了

Answer 3

把代码贴出来吧，大家都是程序员，不用害羞。