Vue前端报错:[Vue warn]: Duplicate keys detected: ‘0’. This may cause an update error
最近在写Vue,有一个页面,在同一个层级同时需要两个v-for
循环,数据也能加载出来,但是前端有报错
报错内容如下:
修改前代码如下:
<el-row v-for="(item,index) in dataList" :key="index"></el-row>
<el-row v-for="(item,index) in dataWaterList" :key="index"></el-row>
这是因为这里的v-for
循环中的key
值重复了
虽然展示效果不影响使用,但是在选择某一个数据的时候是需要传index
的,这个时候就会影响使用了。我这里用的是<el-row>
也去找了一些解决办法,有的办法是:key="index+ '1'"
,也就是index+1
,但是我这里的第一个v-for
循环具体有多少个,是不一定的,+1
不太可行,尝试了一些别的。
修改后代码如下:
<el-row v-for="(item,index) in dataList" :key="index"></el-row>
<el-row v-for="(item,index) in dataWaterList" :key="index+dataList.length+1"></el-row>
正常运行,前端无报错
欢迎纠错或者提供更好的解决方法 !