美文网首页
Vue渲染页面列表时,报错Avoid using non-pri

Vue渲染页面列表时,报错Avoid using non-pri

作者: 橙_知足常乐 | 来源:发表于2021-01-15 14:15 被阅读0次

    Vue渲染页面列表时,报以下两种错误时,均是key值不唯一或重复使用

    1.加载刷新时页面报错如下:

    Avoid using non-primitive value as key, use string/number value instead.

    2.渲染页面: Duplicate keys detected: '61'. This may cause an update error.

    解决方案:

    加载某页面时冒出这两种报错,可能是由于v-for循环里,key值可能重复了,所以会报这个错。

    查看代码: 发现key值重复了,更改为index+id

    key值是必须唯一的,如果重复就会报错

    为了避免这个情况可以把key值改为index或者id(这里key最好用id,才能达到key值唯一,就地复用的原则,大大节省了dom的渲染)

    相关文章

      网友评论

          本文标题:Vue渲染页面列表时,报错Avoid using non-pri

          本文链接:https://www.haomeiwen.com/subject/ufqwaktx.html