极客观点
项目管理
HarmonyOS
问题描述
如题目所示，有一个数组 使用 v-for 循环遍历这个数组，进行渲染展示，当用户点击删除按钮的时候应对应的删除 相应的数组元素并且更新 dom。
但是不知道什么原因，每次点击删除按钮，虽然删除了数组的元素，但是反映到 dom 上面确实删除了最后一个图片块，如果下图所示
问题出现的环境背景及自己尝试过哪些方法
尝试追踪删除掉的数组元素
data() {
return {
imgLists: [{
'id': 1,
'name': 'HANEE',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f1c8a815.png'
}, {
'id': 2,
'name': '\u5bde',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f1c4138c.png'
}, {
'id': 3,
'name': '\u51ac\u6728',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f1af2c4c.png'
}, {
'id': 4,
'name': 'Omoti@\u304a\u4ed5\u4e8b\u52df\u96c6\u4e2d\u3067\u3059',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f197b69c.png'
}, {
'id': 5,
'name': '\u5982\u6708',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f16f04fd.png'
}, {
'id': 6,
'name': 'yomochi',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f11164ea.png'
}, {
'id': 7,
'name': '\u5149\u5d0e',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f1054a46.png'
}, {
'id': 8,
'name': '\u30c4\u30b0\u30c8\u30af',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f102c675.png'
}, {
'id': 9,
'name': 'B-\u9280\u6cb3@\u4e09\u65e5\u76eeC-23a',
'pic_url': 'https://c1.staticflickr.com/5/4911/44982436915_416914b095_z.jpg'
}, {
'id': 10,
'name': '\u96f6\uff20\u901a\u8ca9\u59cb\u3081\u305f',
'pic_url': 'https://c1.staticflickr.com/5/4866/30955883347_392ee40835_z.jpg'
}, {
'id': 11,
'name': 'mocha@TIA\u3010\u305132a\u3011',
'pic_url': 'https://c1.staticflickr.com/5/4889/44077351050_ebe143e716_z.jpg'
}, {
'id': 12,
'name': '\u548c\u6b66\u306f\u3056\u306e',
'pic_url': 'https://c1.staticflickr.com/5/4841/44980546425_dbb516e19c_z.jpg'
}]
}
},
methods: {
testDel(i) {
console.log(in)
this.imgLists.splice(i, 1)
this.imgLists.forEach((e) => {
console.log(e.id, i)
})
},
发现先确实移除的是点击的那个数组元素，当我点击第一个图片的删除按钮时
当我点击第三个图片的删除按钮时,数组中移除的确实是 id 为3的元素
但是反映到 dom 上面确实是只删除最后一个块
相关代码
<template>
<el-container>
<el-main>
<el-row>
<el-col v-for="(item,index) in imgLists" :xs="12" :sm="6" :md="4" :lg="4" :xl="4" :key="index" style="padding:0px 5px 10px;">
<el-card :body-style="{ padding: '0px' }" shadow="hover">
<img v-lazy="item.pic_url" class="image">
<div style="padding: 14px;">
<div class="bottom clearfix">
<el-row style="margin-top:2px;">
<el-button type="primary" icon="el-icon-info" plain size="mini" />
<el-button type="info" icon="el-icon-zoom-in" plain size="mini" @click="addImg(index)" />
<el-button type="danger" icon="el-icon-delete" plain size="mini" @click="testDel(index)" />
</el-row>
</div>
</div>
</el-card>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<style>
.image {
width: 100%;
height: 230px;
display: block;
}
.el-row {
margin: 0px -5px;
}
</style>
<script>
export default {
data() {
return {
imgLists: [{
'id': 1,
'name': 'HANEE',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f1c8a815.png'
}, {
'id': 2,
'name': '\u5bde',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f1c4138c.png'
}, {
'id': 3,
'name': '\u51ac\u6728',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f1af2c4c.png'
}, {
'id': 4,
'name': 'Omoti@\u304a\u4ed5\u4e8b\u52df\u96c6\u4e2d\u3067\u3059',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f197b69c.png'
}, {
'id': 5,
'name': '\u5982\u6708',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f16f04fd.png'
}, {
'id': 6,
'name': 'yomochi',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f11164ea.png'
}, {
'id': 7,
'name': '\u5149\u5d0e',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f1054a46.png'
}, {
'id': 8,
'name': '\u30c4\u30b0\u30c8\u30af',
'pic_url': 'https://i.loli.net/2019/01/29/5c500f102c675.png'
}, {
'id': 9,
'name': 'B-\u9280\u6cb3@\u4e09\u65e5\u76eeC-23a',
'pic_url': 'https://c1.staticflickr.com/5/4911/44982436915_416914b095_z.jpg'
}, {
'id': 10,
'name': '\u96f6\uff20\u901a\u8ca9\u59cb\u3081\u305f',
'pic_url': 'https://c1.staticflickr.com/5/4866/30955883347_392ee40835_z.jpg'
}, {
'id': 11,
'name': 'mocha@TIA\u3010\u305132a\u3011',
'pic_url': 'https://c1.staticflickr.com/5/4889/44077351050_ebe143e716_z.jpg'
}, {
'id': 12,
'name': '\u548c\u6b66\u306f\u3056\u306e',
'pic_url': 'https://c1.staticflickr.com/5/4841/44980546425_dbb516e19c_z.jpg'
}]
}
},
methods: {
testDel(i) {
console.log('删除前')
this.imgLists.forEach((e) => {
console.log(e.id)
})
this.imgLists.splice(i, 1)
console.log('删除后')
this.imgLists.forEach((e) => {
console.log(e.id)
})
},
deleteImg(index) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log(index)
this.imgLists.splice(index, 1)
this.imgLists.forEach((e) => {
console.log(e.id, index)
})
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
addImg() {
var obj = {}
obj.id = 1111
obj.name = 'fuckYour'
obj.pic_url = 'lasdkjf'
this.imgLists.push(obj)
}
}
}
</script>
各位有没有遇到过这种问题，都是怎么解决的呢
知道你的什么问题了,点击删除后冒泡执行了
addImg方法两个按钮click加个
stophttps://jsfiddle.net/kr705g69/
https://jsfiddle.net/kr705g69/
备注：标签最好不要用简写，你的写法在线运行的时候会出现标签嵌套的现象