vue渲染列表时报错 [Vue warn]: Avoid using non-primitive value as key, use string/number

进入页面报错，如下：

原代码，如下：

<li v-for="item in this.new_list[0]" :key="item">
    <el-container>
        <el-header>
            <div class="title">{{item.title}}</div>
        </el-header>
        <el-main>
            <div>{{item.content}}</div>
        </el-main>
    </el-container>
</li>

原来是 key 出错了，上面提示 key 的值必需是 string 或者 number；也有可能是key的值重复了item，需要换个变量名。

修正代码，如下：

<li v-for="(item,index) in this.new_list[0]" :key="index">
    <el-container>
        <el-header>
            <div class="title">{{item.title}}</div>
        </el-header>
        <el-main>
            <div>{{item.content}}</div>
        </el-main>
    </el-container>
</li>

啦啦啦~~~这样就不会报错了。

—记录项目中的点点滴滴

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_39994421/article/details/102184292
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-07 18:49:00
阅读 ( 753 )
分类：前端

vue渲染列表时报错 [Vue warn]: Avoid using non-primitive value as key, use string/number

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看