vue中tab切换时请求数据重复问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
问题场景
切换tab时,会请求列表的接口,在then中进行了数据处理(添加到list后面)
ps:list在不同的tab中时同一个
快速点击tab切换时,上一个tab的请求,会在当前的tab的list中处理,导致数据不对
例如:
两个tab:成功列表 & 失败列表
点击成功列表后,且请求未返回时,点击失败列表:这个时候,失败列表中会出现成功列表的数据
解决方案:
大概的代码意思,不能直接复制运行的,参考意思就行
data() {
return {
random: new Date().valueOf(),
activeTab: 0,
list: []
};
}
watch: {
activeTab: {
handler(val) {
this.random = new Date().valueOf()
// 请求list
this.getList()
},
},
}
methods: {
getList() {
const random = this.random
api().then((list) => {
// 判断处理数据时的tab是不是没变过
if (this.random != random) return
this.list = this.list.concat(list)
})
}
}
这个只是想到的一个比较简单偷懒的方法,并不是项目中实现的最优方案。结合自己项目情况考虑为好。
axios 取消请求相对而言,比较麻烦,懒,小项目不想写
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)