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

问题描述

问 题

有一个上传组件,当图片上传完后,向数组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);
},

解决方案

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

这篇关于vue.js - 关于vue2,v-for渲染列表以及删除的问题;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！