[英]How to use vue-infinite-loading in Nuxt.js (Vue.js)
I developing web app in Nuxt.js (Vue.js)我在 Nuxt.js (Vue.js) 中开发 Web 应用程序
first, vue init nuxt/express MyProject首先, vue init nuxt/express MyProject
~page/help.vue ~页面/help.vue
<template>
<div>
<p v-for="item in list">
Line:
<span v-text="item"></span>
</p>
<infinite-loading :on-infinite="onInfinite" spinner="bubbles" ref="infiniteLoading"></infinite-loading>
</div>
</template>
<script>
let InfiniteLoading = require('vue-infinite-loading')
export default {
...
components: {
InfiniteLoading
},
methods: {
onInfinite: function () {
setTimeout(() => {
const temp = []
for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
temp.push(i)
}
this.list = this.list.concat(temp)
this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
}, 1000)
}
}
}
</script>
and, Moving from '/home' to '/help'并且,从“/home”移动到“/help”
window is not defined
窗口未定义
So, I tried the following所以,我尝试了以下
let InfiniteLoading;
if (process.BROWSER_BUILD) {
InfiniteLoading = require('vue-infinite-loading')
}
result,结果,
Failed to mount component: template or render function not defined.(found in InfiniteLoading)
无法挂载组件:未定义模板或渲染函数。(在 InfiniteLoading 中找到)
I've tried the nuxt.js document method.我试过 nuxt.js 文档方法。 However, I could not solve it.
但是,我无法解决它。 I want to find a more accurate answer.
我想找到更准确的答案。
help me, Thanks.帮帮我,谢谢。
Just did it myself and works like a charm.只是自己做的,就像一个魅力。 See it in action on comment section at https://guessthatshit.com
在https://guessthatshit.com 的评论部分查看它的实际效果
Install:安装:
npm install vue-infinite-scroll --save
Create file vue-infinite-scroll.js in plugins directory:在 plugins 目录中创建文件 vue-infinite-scroll.js:
import Vue from 'vue'
import InfiniteScroll from 'vue-infinite-scroll'
Vue.use(InfiniteScroll);
Update nuxt.config.js to include following entry:更新 nuxt.config.js 以包含以下条目:
plugins: [
{src: '~plugins/vue-infinite-scroll.js', ssr: false}
],
HINT: Dont forget to set infinite-scroll-disabled="autoLoadDisabled" properly otherwise you may spam your load function.提示:不要忘记正确设置 infinite-scroll-disabled="autoLoadDisabled" 否则您可能会向加载函数发送垃圾邮件。
I also recognized that (only on nuxt production, not in dev) HTML is written before variables are assigned through "props: ['commentsData'],".我还认识到(仅在 nuxt 生产中,而不是在开发中)HTML 是在通过“props: ['commentsData'],”分配变量之前编写的。 therefore autoscroll function is triggered before some variable exists.
因此在某些变量存在之前触发自动滚动功能。 Fix this with:
解决这个问题:
computed: {
autoLoadDisabled() {
return this.loading || this.commentsData.length === 0;
},
},
If you use NuxtJs with vue-infinite-loading, you need to create a file.js in plugin folder:如果你使用 NuxtJs 和 vue-infinite-loading,你需要在插件文件夹中创建一个 file.js:
import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue'
Vue.use(InfiniteLoading)
After, you create vendor build in nuxt.config.js:之后,您在 nuxt.config.js 中创建供应商构建:
build: {
vendor: ['~/plugins/infiniteload.js']
},
My answer is working with NuxtJs我的答案是使用 NuxtJs
plugins
folderplugins
文件夹中添加 vue-infinite-loading 作为插件nuxt.config.js
file => { src: '@/plugins/vue-infinite-loading.js', ssr: false }
nuxt.config.js
文件 => { src: '@/plugins/vue-infinite-loading.js', ssr: false }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.