vue使用element的infiniteScroll及报错Failed to execute ‘observe‘ on ‘MutationObserver‘:parameter 1 is not o
Uncaught TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’这个是 vue 项目使用 element-UI 的 InfiniteScroll 无限滚动,出现的报错,参考过几篇博主的文章,都不能解决问题。最后在一头雾水的时候,本来想放弃使用 eleme.
·
Uncaught TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’
这个是 vue 项目使用 element-UI 的 InfiniteScroll 无限滚动,出现的报错,参考过几篇博主的文章,都不能解决问题。最后在一头雾水的时候,本来想放弃使用 element-UI 的无限滚动。所以安装了,vue-infinite-scroll
,安装之后,在 main.js 里面
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
在我还没有使用这个插件的时候,页面又可以正常运转了。这就让我这个小白很吃惊了 😨,怎么肥事。希望有知道的大佬指点一下,也不知道自己是哪里出问题了。 💪
我放一下自己使用无限滚动组件的代码,有需要的小伙伴可以借鉴一下·
前提是你已经安装了 element UI库
<ul v-infinite-scroll="load" infinite-scroll-disabled="disabled">
<div class="Cardcontent">
<router-link
v-for="(item, index) in textList"
:key="index"
:to="'/show/' + item.cId">
<card
:content="item.note"
:height="'200px'"
:lineClamp="7"
:display="'-webkit-box'"
:boxOrient="'vertical'"
style="box-shadow: 1px 1px 10px rgba(#26a2ff, 0.5);"
></card>
</router-link>
</div>
</ul>
<p v-if="loading" class="loading">
// loading的图片,可以使用 element 的图标,也可以自己找一张 gif 图
<img style="margin-left: 180px;" src="/static/img/5-121204194025.gif" alt="">
</p>
<p v-if="noMore" style="margin:52px auto;width: 140px; color: #ccc;">
<span>没有数据了,快去投稿吧</span>
</p>
data () {
return {
textList: [], // 存放数据的数组
count: 0, // 起始页数值为0
loading: false,
totalPages: '' // 取后端返回内容的总页数
}
},
// 上拉加载
computed: {
noMore () {
return this.count >= this.totalPages - 1
},
disabled () {
return this.loading || this.noMore
}
},
mounted () {
this.getMessage()
},
methods: {
// 上拉加载
load () {
this.loading = true
setTimeout(() => {
this.count += 1
this.getMessage()
}, 1000)
},
// 获取后端的信息
getMessage () {
let postData = qs.stringify({
pageNum: this.count
})
// 调用接口 post 请求的参数最后序列化
axios.post('/api/selectByPage', postData, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then((response) => {
if (response.status === 200) {
this.textList = this.textList.concat(response.data)
this.totalPages = response.data.length
this.loading = false
}
})
}
}
关注公众号:大明贵妇,无套路获取前端学习资料,期待各位客官来临
更多推荐
已为社区贡献12条内容
所有评论(0)