vue key的bug

今天遇到一个bug,列表删除元素时,明明在外层设置了key,但是列表元素的状态居然复用了,找了好久原因,最后是key的取值问题,记录一下。

首先key可以取undefine,这个是不会报错的
然后项目的代码结构是这样的

<component
    v-for="(item, index) in showList"
    :is="getComponent(item.type)"
    :key="item[index]"
    :data="item"
 >
 </component>

问题就在于,数据源的item中是有index这个属性的,并且作为id是唯一的,但是取的时候,是通过item[index]取的,index不是变量嘛,so
在这里插入图片描述

所有的key都是undefined了,哈哈哈。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/477073.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

工商银行ECOS系统应用架构

2019 年 11 月 8 日&#xff0c;工商银行在北京正式发布 ECOS 智慧银行生态系统。ECOS 以 Ecosystem&#xff08;生态系统&#xff09;前四个字母命名。其中E 代表“企业级”&#xff08;Enterprise-level&#xff09;&#xff0c;C 代表“以客户为中心”&#xff08;Customer-…

rpc详解rpc框架

文章目录 概述rpc的优点组件工作流程&RPC的底层原理RPC的底层原理 RPC框架rpc框架优点RPC 的实现基础RPC的应用场景RPC使用了哪些关键技术rpc 调用异常一般怎么处理rpc和http的区别为什么RPC要比HTTP更快一些Dubbo和openfeign 区别远程调用RPC框架传输协议传输速度 概述 在…

6.shell case控制语句

case控制语句 1.什么是case case条件语句相当于多分支的if/elif/else条件语句&#xff0c;主要还是用来做条件判断的,常被应用于实现系统服务启动脚本。 case语句中&#xff0c;会将case获取的变量值与表达式部分的值1、值2、值3等逐个进行比较&#xff0c;如果变量值和某个表…

vue3 报错 require is not defined

问题 require is not defined 原因 vite 不支持require的用法&#xff0c; webpack是支持的 解决 方法一&#xff1a; 更改vite使用语法 vite官网 方法二 安装转换插件vite-plugin-require-transform 仓库地址 参考 关于Vite不能使用require问题 方法二Vite 踩坑 —— …

html5cssjs代码 036 CSS默认值

html5&css&js代码 036 CSS默认值 一、代码二、解释 CSS默认值&#xff08;也称为浏览器默认样式&#xff09;是指当HTML元素没有应用任何外部CSS样式时&#xff0c;浏览器自动为这些元素赋予的一组基本样式。这些样式是由浏览器的默认样式表&#xff08;User Agent sty…

【Godot4.2】实现鼠标控制对象(控件)旋转

概述 在一些情况下我们可能需要使用鼠标控制对一个图形或对象&#xff08;如控件&#xff09;进行旋转。 通过如下图的分析&#xff1a; 我们可以知道&#xff1a; 我们只需要求出对象&#xff08;如控件&#xff09;中心点C到鼠标点击的位置start的向量与中心点C到鼠标移动…

STM32最小核心板使用HAL库实现CAN接口通讯(轮询方式)

这里使用了CAN1的接口&#xff0c;具体使用MX创建项目就不放了 需要注意的是&#xff0c;由于是最小核心没有CAN的收发模块需要外接一个 STM32核心板接CAN收发模块不需要交叉 /**CAN GPIO ConfigurationPA11 ------> CAN_RXPA12 ------> CAN_TX */ CAN收发模块…

力扣454. 四数相加 II

思路&#xff1a;把四个数组拆成两对&#xff0c;两个分别相加&#xff0c;记录第一对的相加结果进map里&#xff0c;再把第二对数组 0-nums2-nums4 去map里面找出现了几次&#xff0c;这题不用对重复的四元组去重&#xff0c;所以出现多次都有效。 class Solution {public int…

[flask] flask的基本介绍、flask快速搭建项目并运行

笔记 Flask Flask 本身相当于一个内核&#xff0c;其他几乎所有的功能都要用到扩展&#xff08;邮件扩展Flask-Mail&#xff0c;用户认证Flask-Login&#xff0c;数据库Flask-SQLAlchemy&#xff09;&#xff0c;都需要用第三方的扩展来实现。比如可以用 Flask 扩展加入ORM、…

ubuntu20.04搭建nginx rtmp视频服务到指定位置解决权限不足

1.安装依赖 apt-get install build-essential libpcre3 libpcre3-dev libssl-dev2.建一个目录 mldir rtmp_nginx 3.源码下载 wget http://nginx.org/download/nginx-1.21.6.tar.gz wget https://github.com/arut/nginx-rtmp-module/archive/master.zip4.解压缩 tar -xf ng…

新能源汽车充电桩站点烟火AI识别检测算法应用方案

新能源汽车作为现代科技与环保理念的完美结合&#xff0c;其普及和应用本应带给人们更加便捷和绿色的出行体验。然而&#xff0c;近年来新能源汽车充电火灾事故的频发&#xff0c;无疑给这一领域投下了巨大的阴影。这不禁让人深思&#xff0c;为何这一先进的交通工具在充电过程…

计算机服务器中了faust勒索病毒怎么办,faust勒索病毒解密工具流程

网络是一把利剑&#xff0c;可以方便企业开展各项工作业务&#xff0c;为企业提供极大的便利&#xff0c;但随着网络技术的不断发展与应用&#xff0c;网络数据安全威胁也在不断增加&#xff0c;给企业的正常生产运营带来了极大困扰&#xff0c;近日&#xff0c;云天数据恢复中…

AJAX-Promise

定义 Promise对象用于表示(管理)一个异步操作的最终完成&#xff08;或失败&#xff09;及其结果值。 好处&#xff1a;1&#xff09;成功和失败状态&#xff0c;可以关联对应处理程序 2&#xff09;了解axios函数内部运作机制 3&#xff09;能解决回调函数地狱问题 语法&…

七仔充电桩平台 二轮电动自行车 四轮汽车 云快充1.5 云快充1.6

文章目录 一、产品功能部分截图1.手机端&#xff08;小程序、安卓、ios&#xff09;2.PC端 二、小程序体验账号以及PC后台体验账号1.小程序体验账号2.PC后台体验账号关注公众号获取最新资讯 三、产品简介&#xff1f;1. 充电桩云平台&#xff08;含硬件充电桩&#xff09;&…

ORACLE查询拼接字段,显示clob原因,及解决办法

今天查询一个字段&#xff0c;使用了拼接&#xff0c;然后查出来就显示clob&#xff1a; 代码如下&#xff1a; SELECT LOAD_DATE, CINO, WM_CONCAT(CITYP) AS CITYPFROM ODS.ZN_CUSTCITYP GROUP BY CINO,LOAD_DATE 显示如图&#xff1a; 解决办法&#xff1a; select t.普…

Java-SSM医院在线预约系统

Java-SSM医院在线预约系统 1.服务承诺&#xff1a; 包安装运行&#xff0c;如有需要欢迎联系&#xff08;VX:yuanchengruanjian&#xff09;。 2.项目所用框架: 前端:JSP、layui等。 后端:SSM,即Spring、SpringMvc、Mybatis等。 3.项目功能点: 1.管理员功能: a.修改个人信息…

[ Django ] 统计接口访问频次

需求及实现思路 需求&#xff1a;统计django项目中接口的调用次数 思路&#xff1a;中间件异步任务celery缓存redis/直接使用中间件&#xff08;会增加中间件的压力&#xff09; 具体思路&#xff1a; 定义中间件&#xff0c;在中间件中响应走的时候判断该请求的url是否存在…

【吾爱破解】Android初级题(二)的解题思路 _

拿到apk&#xff0c;我们模拟器打开看一下 好好&#xff0c;抽卡模拟器是吧&#x1f600; jadx反编译看一下源码 找到生成flag的地方&#xff0c;大概逻辑就是 java signatureArr getPackageManager().getPackageInfo(getPackageName(), 64).signaturesfor (int i 0; i &l…

综合知识篇15-开发管理考点(2024年软考高级系统架构设计师冲刺知识点总结系列文章)

专栏系列文章: 2024高级系统架构设计师备考资料(高频考点&真题&经验)https://blog.csdn.net/seeker1994/category_12593400.html案例分析篇00-【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】(2024年软考高级系统架构设计师冲刺知识点总结-案例…

C# 读取二维数组集合输出到Word预设表格

目录 应用场景 设计约定 范例运行环境 配置Office DCOM 实现代码 组件库引入 核心代码 DataSet转二维数组 导出写入WORD表格 调用举例 小结 应用场景 存储或导出个人WORD版简历是招聘应用系统中的常用功能&#xff0c;我们通常会通过应用系统采集用户的个人简历信息…