Duplicate keys detected: ‘xxx‘. This may cause an update error.问题

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

v-for 之前的写法

{
    {tags}}
报错 
Duplicate keys detected: 'Rhizosolenia'. This may cause an update error.

这里循环是有key ,报错原因是循环key重复了,解决办法,就是把循环的次数(index)给加上

{
    {tags}}

这样就不报错了
但是有新的问题,如果连着写了多个v-for循环,这个错误又来了,

{
    {tags}}
{
    {tag}}
Duplicate keys detected: '0'. This may cause an update error.
Duplicate keys detected: '1'. This may cause an update error.
Duplicate keys detected: '2'. This may cause an update error.
......

原因:这两个for循环的key值是一样的,上一个循环完了,会覆盖下一个的key,所以报错,解决办法就是让key不一样,拼接字符串

{
    {items}}
{
    {items}}

这样啊就不会重复了

总结一下,如果单个 v-for,直接用index作为key就行
如果多个 v-for,直接用index+‘1’作为key就行(或者其他办法,只要不一样就行)

你可能感兴趣的:(vue,html5,html5)