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) }, },
これでとりあえず質問した人のは動く。