今天遇到这个问题,遇到这个问题多数因为:key值的问题

第一种情况(key重复)

<div class="name-list" v-for="(item,index) in list" :key="item.sid">
{{item.name}}
</div>
list: [
{
sid:,
name:"张三",
},
{
sid:,
name:"李四",
},
]

第二种情况(页面上有两个for循环同一个数组,导致key重复)

<div class="name-list" v-for="(item,index) in list" :key="index">
{{item.name}}
</div> <div class="name-list" v-for="(item,index) in list" :key="index">
{{item.name}}
</div>

第二种解决

<div class="name-list" v-for="(item,index) in list" :key="index + ''_index">
{{item.name}}
</div> <div class="name-list" v-for="(item,index) in list" :key="'index_' + index">
{{item.name}}
</div>

1.解决这些问题找到其根源就好了。祝大家撸码之路顺畅无阻、

[Vue warn]: Duplicate keys detected: '1'. This may cause an update error的更多相关文章

  1. [Vue warn]: Duplicate keys detected: '0'. This may cause an update error.

    1.[Vue warn]: Duplicate keys detected: '0'. This may cause an update error. 第一眼看到这个错误一脸懵逼,项目使用很久了,代码 ...

  2. [Vue warn]: Duplicate keys detected: 'area'. This may cause an update error.

    运行vue程序,浏览器报错: 原因:检测到重复的密钥:'area',因为在使用v-for循环绑定的时候,key的值是唯一的,不能相同,否则会出现意想不到的bug 解决办法:v-for时绑定的key唯一

  3. vue报错之Duplicate keys detected: '0'. This may cause an update error.

    昨天运行vue项目的时候,出现了[Vue warn]: Duplicate keys detected: '0'. This may cause an update error(错误,检测到重复的ke ...

  4. Duplicate keys detected: '0'. This may cause an update error.

    在运行vue项目的时候报了:[Vue warn]: Duplicate keys detected: ‘0’. This may cause an update error(错误,检测到重复的key值 ...

  5. Vue报错 Duplicate keys detected: '1'. This may cause an update error. vue报错

    情况一.错误信息展示为关键字‘keys‘,此时应该检查for循环中的key,循环的key值不为唯一性 (很普通) 情况二.有两个相同的for循环,而这两个for循环的key值是一样的,此时将一个的ke ...

  6. [VUE ERROR] Duplicate keys detected: 'tab-user'. This may cause an update error.

    错误消息如图: 如果你看到此错误消息,则说明 v-for 指令的 key值 重复了,只需修改你的 key值 让其不会重复即可.

  7. ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: 'xxx'问题

    今天工作遇到一个问题: 需求背景:页面中有几个tab,需要根据登录用户的权限控制tab标签的显示与隐藏 . <el-tabs @tab-click="handleClick" ...

  8. vue踩坑记录:[Vue warn]: $attrs is readonly.

    今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...

  9. vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决

    在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...

随机推荐

  1. JavaScript创建对象的方式

    一.工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程. 考虑到在 ECMAScript 中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的 ...

  2. Virtualbox 虚拟机安装Linux

    背景:Win10系统   MSI主板 目标:基于Win10 利用虚拟机Virtualbox安装Linux 准备工作:Ctrl+Alt+Del打开任务管理器——>性能(查看CPU虚拟化是否开启) ...

  3. c# 获取某进程占用的内存(任务管理器显示的内存一致)

    最近写了看门狗的winform程序,需求要求显示监测的进程所占的内存大小 找了好几个方法,都和任务管理器显示的内存不一致 最后找到了一个解决方法 PerformanceCounter pf1 = ne ...

  4. PA教材提纲 TAW12-2

    Unit1 Adjustment of SAP Standard Software(SAP标准软件修改) 1.1 Adjusting SAP Standard Software(如何修改SAP标准软件 ...

  5. 我的代码-sql query

    # coding: utf-8 # In[ ]: WITH List AS (SELECT e.*,f.* FROM( SELECT DISTINCT c.lot_id, c.wafer_key,LE ...

  6. 私有IP

    私有IP地址段为10.0.0.0-10.255.255.255,172.16.0.0-172.31.255.255,192.168.0.0-192.168.255.255.

  7. centos tree 命令

    ftp://mama.indstate.edu/linux/tree/ download & make

  8. 在windows上编译apr库

    环境: win7_x64旗舰版.VS2015企业版.CMake3.8 一.下载apr相关库 1.1)expat下载地址:https://github.com/libexpat/libexpat/rel ...

  9. Hadoop MapReduce2.0(Yarn)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/cqboy1991/article/details/25056283 MapReduce2.0(Yar ...

  10. mysql 生成时间序列数据 - 存储过程

    由于时间自动转换为int值, 做一步转化,也可在调用时处理 use `test`; CREATE table test.test1 as SELECT state, id, `规格条码`, `色号条码 ...