xCalder 2019-06-03 10:21 采纳率: 0%
浏览 760

vue.js api请求成功,列表50条数据分页偶尔渲染不出来,有遇到的吗

经排查,不是vue.js 的问题,是有新内容的时候,输出json之前多了个调试的输出。

vue.js api请求成功,列表50条数据分页偶尔渲染不出来,有遇到的吗

偶尔会发生v-for下的内容空白,api 返回json 数据正确

无报错信息

代码



import paginate from './paginate' import Video from 'video.js' import 'video.js/dist/video-js.css' export default { data (){ return { videos: [], current_page: '', to: '', total: '', last_page: '', from: '', with_url: '', lang: '', num: 0, num_total: 0, num_limit: 10, data_videos: [] } }, components: { 'paginate': paginate, Video }, computed: { }, created:function(){ this.getVideos(); }, mounted (){ window.addEventListener('scroll',this.handleScroll,true);//监听shu标事件,再渲染另40条 }, methods:{ getVideos () { axios.get('/api/videos/list?offset=50&locale='+locale+'&page='+page+'&keyword='+keyword).then(response => { if(response.data.status){ this.lang = response.data.local; let result = response.data.data; let Seo = response.data; this.json_ld = Seo.json_ld; document.querySelector('title').innerHTML = Seo.title; document.getElementById('json_ld').innerHTML = Seo.json_ld; document.querySelector('meta[name=keywords]').setAttribute('content', Seo.keywords); document.querySelector('meta[name=description]').setAttribute('content', Seo.description); let videos = result.data; this.data_videos = videos; this.videos = videos.slice(this.num * this.num_limit, (this.num + 1) * this.num_limit);//分段,每次渲染10条 this.num_total = videos.length; this.current_page = result.current_page; this.to = result.to; this.total = result.total; this.last_page = result.last_page; this.from = result.from; this.with_url = response.data.with_url; let _this=this setTimeout(function(){//在超大屏幕下没有滚动条,1秒后自动渲染 _this.num++; if(_this.num * _this.num_limit > _this.num_total){ return false; } _this.videos = _this.videos.concat(_this.data_videos.slice(_this.num * _this.num_limit, (_this.num + 1) * _this.num_limit)); }, 1000); } }); }, startPlay(id){ Video(id, {}, function onPlayerReady() { this.play(); document.getElementById(id).style.display = 'block'; document.getElementById(id+'_html5_api').style.display = 'block'; document.querySelector('img[class='+id+']').style.display = 'none'; }) }, stopPlay(id){ Video(id, {}, function onPlayerReady() { this.pause(); document.getElementById(id).style.display = 'none'; document.getElementById(id+'_html5_api').style.display = 'none'; document.querySelector('img[class='+id+']').style.display = 'block'; }) }, handleScroll(){ this.num++; if(this.num * this.num_limit > this.num_total){ return false; } this.videos = this.videos.concat(this.data_videos.slice(this.num * this.num_limit, (this.num + 1) * this.num_limit)); } } }
  • 写回答

1条回答 默认 最新

  • 「已注销」 2019-06-04 09:17
    关注

    有时候加载数据慢一点就会遇到这种情况
    最好就是加一个锁等数据加载完后再渲染页面

    评论

报告相同问题?

悬赏问题

  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)
  • ¥20 matlab yalmip kkt 双层优化问题
  • ¥15 如何在3D高斯飞溅的渲染的场景中获得一个可控的旋转物体
  • ¥88 实在没有想法,需要个思路
  • ¥15 MATLAB报错输入参数太多
  • ¥15 python中合并修改日期相同的CSV文件并按照修改日期的名字命名文件
  • ¥15 有赏,i卡绘世画不出
  • ¥15 如何用stata画出文献中常见的安慰剂检验图
  • ¥15 c语言链表结构体数据插入