万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

  • ・資産運用おすすめ
    10万円は1000円くらい利益
    • ・寄付お願いします
      YENTEN:YYzNPzdsZWqr5THWAdMrKDj7GT8ietDc2W
      BitZenny:ZfpUbVya8MWQkjjGJMjA7P9pPkqaLnwPWH
      c0ban:8KG95GXdEquNpPW8xJAJf7nn5kbimQ5wj1
      Skycoin:KMqcn7x8REwwzMHPi9fV9fbNwdofYAWKRo

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

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