Vue,無限スクロール

Nuxt.jsでの使い方わからなかった。

vue-infinite-loadingっての使いたい。

ドキュメント通りだとwindow is not definedとかエラーでる。 How to use vue-infinite-loading in Nuxt.js (Vue.js) - Get Help - Vue Forum

これを参考にした。

プロジェクト直下からのパス plugins/infiniteloading.js に以下を追加

import Vue from 'vue';
import InfiniteLoading from 'vue-infinite-loading';

Vue.component('infinite-loading', InfiniteLoading);

nuxt.config.jsに以下を追加 module.exports = { }のなかに。

plugins: [
  { src: '~/plugins/infiniteloading', ssr: false }
]

さっきの質問してる人とは少し変えてる。

あとはテンプレート内に

    <p v-for="item in list" :key="item.id">
      Line:
      <span v-text="item"></span>
    </p>
    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"></infinite-loading>

JSでは

  data () {
    return {
      // 無限ループ.
      list: [],
    }
  },

メソッド

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

これでとりあえず質問した人のは動く。