[Vuejs]-V-for loop only array correspond to the dynamic page number

by

0👍

✅

You should iterate over computed property that will return specific page from listingsData, not over all pages.

Something like that:

<template>
  <div v-if="currentPage">
    <ul v-for="item in currentPage.results" :key="item.id">
      <li>{{ item.name }}</li>
    </ul>
  </div>
  <div v-else><i>Loading...</i></div>

  <button @click="fetchPage(-1)" :disabled="page===1">Prev Results</button>
  <button @click="fetchPage(1)" :disabled="page===10">Next Results</button>
</template>

<script>
const api = "https://myapi.com/get/users";
export default {
  data() {
    return {
      page: 1,
      listingsData: [],
    };
  },
  created() {
    this.fetchPage(0);
  },
  computed: {
    currentPage() {
      return this.listingsData.find(i => i.page === this.page);
    },
  },
  methods: {
    fetchPage(diff) {
      this.page += diff;
      if (this.currentPage) {
        return; // page already loaded
      }
      const page = this.page;
      axios.get(api, { params: { page } })
           .then((res) => {
             this.listingsData.push({
               page,
               results: res.data.results,
             });
           });
    },
  }
};
</script>

Here, we’re loading page only if it hasn’t been loaded before, and disable Prev/Next buttons if current page is 1/10 respectively.

Here is jsfiddle (with mockup data instead of actual API calls).

Leave a comment