<a-tag v-for="(item,i) in modelProps.prdSelData"
            :key="i"
            closable
            @close="tagBtnCloseFunc(item)"
            @click="tagBtnClickFunc(item)"
            :style="i==modelProps.prdSelData.length-1?'background-color:#1890FF':''"
          >{{item.name}}</a-tag>

tag是通过遍历modelProps.prdSelData里面的数据,同时,我绑定的key是item的下标。这个时候,你对tag进行操作,是没问题的
问题来了,我点击关闭,肯定是想去掉这个tag,同时肯定想去掉相应的数据( modelProps.prdSelData中的对应item),不然我关闭它没有意义。
在这里插入图片描述
同时,我在updata钩子函数中打印一个常量,console.log(1)
在这里插入图片描述
通过打印,我发现,先执行函数,然后页面上才会关闭相应的tag,但是,updata函数未执行!也就是说页面并没有更新也就是说,没有数据变化。ok我再从遍历数据中删掉对应的item。
改变数据后回updata,以为之前关闭了某一个,现在又重新渲染新的tag,所以会关闭两个tag,这个不是我们想要的,也是个bug。
找了很多资料,都没解决
于是我想到了,他关闭肯定是根据某一个关键值吧,关键值,关键值……key,key,key……,对了我绑定的key是i值,也就是0,1,2……,我关闭了1,重新渲染的之后,每一个tag的key就变了,那么我操作的关闭key为1的tag就会被标记,所以重新渲染的tag,key为1的也会被关闭。对 ,就是这个原因,所以我需要key值是数据的主键,不会因为位置变化而变化的。于是我把:key=‘i’,改成了:key=‘item.id’。
完美解决,不管数据是否从新渲染,都不会多关闭其他的tag,总结,以后再写v-for的时候,不要图省事用下标,给他一个固定的key值!

Logo

前往低代码交流专区

更多推荐