Vue前端报错：[Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error

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>

正常运行，前端无报错

欢迎纠错或者提供更好的解决方法 ！