iview 下拉刷新loadTop报错解决
2018-06-27 09:04:17来源:博客园 阅读 ()
<div class="noData" v-if="lifeList.length==0"> <img src="../assets/images/noData.png" alt=""> <p>这里暂时还没有内容哦~亲</p> </div> <mt-loadmore :top-method="loadTop" ref="loadTop" v-else> <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <LifeListItem :lists="lifeList" merchantType="user"></LifeListItem> <div class="loading-text" v-show="{loadingTextBtn:true}"> <span v-text="loadingText"></span> <mt-spinner v-if="(loadingComplete==false)" type="snake" :size="16"></mt-spinner> </div> </div> <div class="refreshComplete" v-if="refreshComplete==true">帖子已更新</div> </mt-loadmore>
由于我设定的页面默认进入的时候加载一次刷新函数,刚开始刷新完之后lifeList还不能及时更新过来,且我给该组件上加了v-else等判断,所以会报错:
Error in mounted hook: "TypeError: Cannot read property 'onTopLoaded' of undefined"
获取当前this.$refs可以看到有这个dom元素 loadTop
但是this.$refs.loadTop打印则为undefined
解决办法:
loadTop(){ this.$store.dispatch('refreshLifeList', { city: this.city, country: this.country, category: this.category, page: 0, size: this.size }); this.page++; if(this.lifeList.length>0){ //这个判断是新加的 this.$refs.loadTop.onTopLoaded(); } this.refreshComplete = true; setTimeout(() => { this.refreshComplete = false; }, 2000) },
给loadTop函数里的
this.$refs.loadTop.onTopLoaded(); 做一个判断即可。
或者在html中不要加v-if和v-else是否展示的判断都可。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- js调用刷新界面的几种方式 2020-03-05
- JavaScript简单下拉菜单特效 2020-02-22
- 页面刷新时记住滚动条的位置jquery代码 2019-12-06
- 刷新时清空文本框内容的js代码 2019-11-08
- Aspnet Mvc 前后端分离项目手记(四)vue项目的搭建(一)(i 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash