如何在Nuxt.js (Vue.js)中使用vue-无穷加载

Question

我在Nuxt.js (Vue.js)中开发web应用程序

首先，vue init nuxt/express MyProject

~page/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>

并且，从‘/家’到‘/帮助’

窗口未定义。

所以，我尝试了以下方法

let InfiniteLoading;
if (process.BROWSER_BUILD) {
  InfiniteLoading = require('vue-infinite-loading')
}

结果，

未能挂载组件:模板或呈现函数未定义。(在InfiniteLoading中找到)

我尝试过nuxt.js文档方法。，但是我无法解决它。我想找到一个更准确的答案。。

帮帮我，谢谢。

Answer 1

只是我自己做的，工作起来很有魅力。在https://guessthatshit.com的注释部分查看它的实际操作

安装：

npm install vue-infinite-scroll --save

在plugins目录中创建文件vue-无穷-scroll.js. in：

import Vue from 'vue'
import InfiniteScroll from 'vue-infinite-scroll'

Vue.use(InfiniteScroll);

更新nuxt.config.js以包括以下条目：

plugins: [
    {src: '~plugins/vue-infinite-scroll.js', ssr: false}
],

提示:不要忘记正确设置无限滚动禁用=“autoLoadDisabled”，否则您可能会垃圾邮件加载功能。

我还认识到(仅在nuxt生产中，而不是在dev中)，HTML是在通过"props：‘评论员数据’“分配变量之前编写的。因此，在某个变量存在之前就触发了autoscroll函数。用以下方法解决这个问题：

    computed: {
        autoLoadDisabled() {
            return this.loading || this.commentsData.length === 0;
        },
    },

Answer 2

如果在vue无限加载中使用NuxtJs，则需要在插件文件夹中创建一个file.js：

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue'
Vue.use(InfiniteLoading)

然后，在nuxt.config.js中创建供应商构建：

build: {
   vendor: ['~/plugins/infiniteload.js']
},

Answer 3

我的答案是与NuxtJs合作

1. 将vue-无限加载作为插件添加到plugins文件夹中。
2. 将此添加到nuxt.config.js文件=> { src: '@/plugins/vue-infinite-loading.js', ssr: false }中
3. 不要在您的文件或页面上导入它，只需使用它。