这样子写，删除时出现一个bug

删除其中某一个，然后再添加不会从头开始添加，会在后一位添加，怎么解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        span{
            display: inline-block;
            margin-right: 6px;
        }
        .v-enter-from, .v-leave-to{
            opacity: 0;
            transform: translateY(30px);
        }
        .v-enter-active, .v-leave-active{
            transition: all .5s ease-in;
        }
        .v-enter-to, .v-leave-from{
            opacity: 1;
            transform: translateY(0px);
        }
        .v-move{
            transition: all .5s ease-in;
        }
       
    </style>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    list: [1,2,3]
                }
            },
            template:`
                <div>
                    <transition-group>
                        <span v-for="(item,index) in list" :key="item" @click="removeSelf(index)">{{item}}</span>
                    </transition-group>
                    <button @click="addItem">增加</button>    
                    <button @click="removeItem">删除</button>  
                </div>
            `,
            methods:{
                addItem(){
                    this.list.unshift(this.list.length+1);
                },
                removeItem(){
                    this.list.shift();
                },
                removeSelf(index){
                    this.list.splice(index,1);
                }
            }
        })
        app.mount('#root')
    </script>
</body>
</html>

慕函数0445997 2023-01-30

源自：vue基础入门（中） 2-6 列表动画

收起

1回答

好帮手慕慕子 2023-01-30 16:36:23

同学你好，由于代码中设置key值为对应的item，那么，如果添加相同的内容时，会被认为没有发生变化，所以出现了bug，可以结合下图注释测试理解：

建议：可以尝试添加随机数试试

祝学习愉快~

收起回答

提问者慕函数0445997 #1

还有个问题就是我把key值改成index，:key="index"，发现添加项没有动画，而最后一项会有动画，这是什么情况

2023-01-31 09:26:02
好帮手慕慕子回复提问者慕函数0445997 #2

当你将key改为index时，与之前也是同样的道理，可以输出查看下：
新添加的内容，索引值并变化，那么vue底层算法在进行比较时，会认为当前项并没有发生变化，而发生变化的是最后一项值为3的索引，所以每次都是最后一项会有动画。
祝学习愉快~

2023-01-31 09:53:45