Saturday 27 May 2017

How to use vue-infinite-loading in Nuxt.js (Vue.js)

I developing web app in Nuxt.js (Vue.js)

first, 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>

and, Moving from '/home' to '/help'

window is not defined

So, I tried the following

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

result,

Failed to mount component: template or render function not defined.(found in InfiniteLoading)

I've tried the nuxt.js document method. However, I could not solve it. I want to find a more accurate answer.

help me, Thanks.



via J. thomas

No comments:

Post a Comment