VueJS: Infinite Loading Masonry Component #rugor

gistfile1.txt

// "dependencies": {
//   "vue": "2.4.4",
//   "vue-images-loaded": "^1.1.2",
//   "vue-infinite-loading": "^2.2.3",
//   "vueisotope": "^3.1.1"
// }

<template>

  <div id="root_layout">

    <isotope id="root_isotope" class="isoDefault" ref="cpt" :list="list" :options="option" v-images-loaded:on.progress="layout">
      <div v-for="(item, index) in list" :key="index">
        <img :src="item.featured_image" :alt="item.title.rendered">
      </div>
    </isotope>
    
    <infinite-loading @infinite="infiniteHandler" spinner="spiral">
      <span slot="no-more">
        No more posts
      </span>
    </infinite-loading>

  </div>

</template>

<script>
import isotope from 'vueisotope'
import imagesLoaded from 'vue-images-loaded'
import InfiniteLoading from 'vue-infinite-loading'
import axios from 'axios'

export default {
  data() {
    return {
      option: {
        masonry: {
          itemSelector: '.item',
          columnWidth: 320,
          isFitWidth: true
        }
      },
      list: [],
      currentPage: 1
    }
  },

  computed: {

  },

  components: {
    isotope: isotope,
    infiniteLoading: InfiniteLoading
  },

  directives: {
    imagesLoaded  
  },

  methods: {
    layout () {
      this.$refs.cpt.layout('masonry');
    },
    infiniteHandler($state) {
      // get default 10 posts per page
      const api = `http://some-rest-url.dev/wp-json/wp/v2/posts?page=${this.currentPage}`
      axios.get(api).then(({ data }) => {
        if (data.length) {
          this.list = this.list.concat(data);
          $state.loaded()
          if (data.length < 10) {
            $state.complete()
          }
        } else {
          $state.complete();
        }
        ++this.currentPage
      })
    }
  }
}
</script>

<style lang="scss" scoped>

  #root_layout {
    width: 100%;
    margin: 0 auto 2rem;
  }

  #root_isotope {
    width: 100%;
    display: block;
    margin: 2rem auto 0rem;
  }

  /* clear fix */
  #root_isotope:after {
    content: '';
    display: block;
    clear: both;
  }

  .item {
    float: left;
    padding: 15px;
    width: 320px;
    height: auto;
    box-sizing: border-box;
    cursor: pointer;
  }

  .item img {
    max-width: 100%;
  }

</style>