如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading答案

【问题标题】：How to use vue-infinite-loading in Nuxt.js (Vue.js)如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading
【发布时间】：2017-10-28 07:01:42
【问题描述】：

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

首先， 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>

还有，从“/home”移动到“/help”

没有定义窗口

所以，我尝试了以下方法

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

结果，

挂载组件失败：未定义模板或渲染函数。（在 InfiniteLoading 中找到）

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

帮帮我，谢谢。

【问题讨论】：

标签： javascript node.js vue.js nuxt.js server-side-rendering

【解决方案1】：

如果你使用带有 vue-infinite-loading 的 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']
},

【讨论】：

【解决方案2】：

只是我自己做的，就像一个魅力。在https://guessthatshit.com@ 的评论部分查看它的实际效果

安装：

npm install vue-infinite-scroll --save

在 plugins 目录下创建文件 vue-infinite-scroll.js：

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}
],

提示：不要忘记正确设置infinite-scroll-disabled="autoLoadDisabled"，否则您可能会向加载函数发送垃圾邮件。

我还认识到（仅在 nuxt 生产中，而不是在开发中）HTML 是在通过“props：['cmetsData']”分配变量之前编写的。因此在某些变量存在之前触发自动滚动功能。解决这个问题：

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

【讨论】：

【解决方案3】：

我的答案是使用 NuxtJs

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

【讨论】：