vue.js track-by的正确使用方法

问题描述

问 题

1.router-view使用了keep-alive,一个滚动加载的列表使用了track-by="id"，
id是唯一的，第一次从外部view加入列表没啥问题，第二次加入就会报duplicate的错误，并建议我使用track-by="$index"。

vue.js:991 [Vue warn]: Duplicate value found in v-for="comment in comments": {......}. Use track-by="$index" if you are expecting duplicate values. (found in component: <v-notification-comments>)

是我使用姿势不对么，keep-alive会把组件保留在内存中避免重新渲染，但是列表数据每次都是重新获取的，而且是在嵌套路由下面的。

解决方案

路由变化,数据重新请求, 主要看你获取数据是在ready还是route->data里...

如果是在ready里, 用keep-alive不会数据重载, 甚至在同一个路由下, 只是id不一样也不会重载
如果是在route->data里, 只要路由切换了, 都会重载, 不管有没有keep-alive...

至于用哪个, 看你的项目来选择, 如果当前页面内容里有路由和当前路由一样的, 那么只能在route->data

可以把数据存在本地存储, 然后判断是否需要从服务器拉取

我目前是用vuex, 数据在route->data里请求, 不过请求前我会判断在vuex里有没有数据, 如果没有数据就请求, 有数据直接从vuex里拉取

====

以上只是个人在使用过程中理解, 不一定正确, 仅供参考

这篇关于vue.js track-by的正确使用方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！