使用vue前端框架尝试做一个购物车页面,勾选进购物车的商品列表可删除,代码如下:
**<template>部分**
<div class="goods-list-wrap">
<transition-group name="list-complete">
<div class="J-shoping-list" v-for="(item, index) in goodsList" :key="index">
<img :src="item.img" />
<div class="J-shoping-list-a">
<p>{{item.price}}</p>
<p>
<span class='goods-list-num'>{{item.num}}</span>
<span class='goods-list-price'>$ {{item.num * parseInt(item.price) || 0}}</span>
</p>
</div>
<i class="el-icon-close goods-del-icon" @click="removeItem(item,index)"></i>
</div>
</transition-group>
</div>
**<script>部分**
data:function(){
return {
goodsList:[
{name: "apple", price: "5.00", num: "2", img: "/static/test/1.jpg"},
{name: "pear", price: "3.00", num: "1", img: "/static/test/2.jpg"},
{name: "grape", price: "7.90", num: "5", img: "/static/test/3.jpg"},
{name: "lemon", price: "2.50", num: "3", img: "/static/test/4.jpg"},
{name: "banan", price: "1.90", num: "7", img: "/static/test/5.jpg"},
{name: "cherry", price: "8.89", num: "2", img: "/static/test/6.jpeg"},
]
}
},
methods:{
removeItem(ele,idx) {
this.goodsList.splice(idx, 1);
},
}
**<style>部分(节选)**
.J-shoping-list {
transition: all 1s;
}
.list-complete-enter, .list-complete-leave-to{
opacity: 0;
transform: translateY(30px);
}
.list-complete-leave-active {
position: absolute;
}
代码部分完成之后,测试过程中出现了如下问题:
动画效果是有了,但是不管删除哪一项,动画都作用在最后一个列表项。
通过查阅资料,发现问题出在循环生成列表项时绑定的key值上,因为key是vue框架用来标识节点唯一性的,当使用index作为key值时,执行删除操作,删除之后的新数组index从1-6变为了1-5,此时,虚拟DOM认为列表项的最后一项需要应用动画效果。所以,改为选用其他属性作为key值,如name(本例中的name属性值无重复)。
<div class="J-shoping-list" v-for="(item, index) in goodsList" :key="index">
改为
<div class="J-shoping-list" v-for="(item, index) in goodsList" :key="item.name">
修改之后的动画效果为:
成功~撒花(_)∠※