专栏首页前端小叙iview 下拉刷新loadTop报错解决

iview 下拉刷新loadTop报错解决

<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是否展示的判断都可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 父组件中vuex方法更新state,子组件不能及时更新并渲染的解决方法

    蓓蕾心晴
  • js实现单张或多张图片持续无缝滚动

    想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重...

    蓓蕾心晴
  • react中实现搜索结果中关键词高亮显示

    网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换。

    蓓蕾心晴
  • 前端面试中常考的源码实现

    如果一个函数作为一个对象的属性,那么通过对象的.运算符调用此函数,this就是此对象

    心谭博客
  • 前端基础-JavaScript综合案例

    insertBefore、firstChild、getComputedStyle、appendChild、createElement、Math.random、M...

    cwl_java
  • mpvue开发小程序过程中遇到的问题

    原生小程序开发方式与vue有些类似,所以用过vue的前端er会很容易上手。但是原生的开发体验实在糟糕,在前端组件化的今天用原生开发组件显得很无力。对于习惯vue...

    javascript.shop
  • Web前端-Vue.js必备框架(四)

    v-if和v-show,v-if为销毁和重建,只有为真才渲染,v-show会渲染,频繁切换使用v-show。

    达达前端
  • 读Zepto源码之属性操作

    这篇依然是跟 dom 相关的方法,侧重点是操作属性的方法。 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版...

    对角另一面
  • javascript面向对象之“多态”

    ES6之前,javascript本质上不能算是一门面向对象的编程语言,因为它对于封装、继承、多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。 但是,...

    陌上寒
  • ReactNative loading toast hint alert alertSheet

    onety码生

扫码关注云+社区

领取腾讯云代金券