The subsequent page fails to load. Issue with the pagination feature

Question

The subsequent page fails to load. Issue with the pagination feature

I'm currently stuck trying to implement pagination in my task and it's not functioning as expected.

My approach involved creating two buttons with click events attached, along with a data property that changes when the buttons are clicked. This property is then written into the link, consequently updating the display to show the next set of 10 posts.

Despite this setup, something seems to be off and the functionality isn't working as intended. I would greatly appreciate any insights on where I might be going wrong, as well as recommendations for articles related to pagination.

Here is a snippet of my HTML:

  <button type="button" @click="counter -=1" class="prev">Prev</button>
  <div class="counter">{{ counter }}</div>
  <button type="button" @click="counter +=1" class="next">Next</button>

This is an excerpt from the Vue component:

export default {
  name: 'app',
  data () {
    return {
      counter: 1,
      zero: 0,
      posts: [],
      createTitle: '',
      createBody: '',
      visiblePostID: ''

    };
  },

  created () {
    axios.get('http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10').then(response => {
      this.posts = response.data;
    });
  }
};

javascript vue.js pagination axios

Answer 1

Answer №1

The initialized function is triggered only during the component's initialization. If you want to send a GET request every time the counter value changes, you should utilize Vue.js watches. You can find more information on this in the following link.

Incorporating this into your sample code:

export default {
  name: 'app',
  data () {
    return {
      counter: 1,
      zero: 0,
      posts: [],
      createTitle: '',
      createBody: '',
      visiblePostID: '',
    }
  },
  watch: {
      counter: function(newValue, oldValue) {
          this.fetchData()
      }
  }
  initialized(){
      this.fetchData()
   },
   methods: {
      fetchData() {
          axios.get(`http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10`).then(response => {
              this.posts = response.data
          })
      }
   }
}

Answer 2

The initialized function is triggered only during the component's initialization. If you want to send a GET request every time the counter value changes, you should utilize Vue.js watches. You can find more information on this in the following link.

Incorporating this into your sample code:

export default {
  name: 'app',
  data () {
    return {
      counter: 1,
      zero: 0,
      posts: [],
      createTitle: '',
      createBody: '',
      visiblePostID: '',
    }
  },
  watch: {
      counter: function(newValue, oldValue) {
          this.fetchData()
      }
  }
  initialized(){
      this.fetchData()
   },
   methods: {
      fetchData() {
          axios.get(`http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10`).then(response => {
              this.posts = response.data
          })
      }
   }
}

Answer 3

Answer №2

To ensure your counter triggers the appropriate content loading, you must set up a watcher that calls a load method. This way, whenever the counter value changes, the correct posts will be loaded for the paginated results.

export default {
    name: 'app',
    data () {
        return{
            counter: 1,
            ...
        }
    },

    created(){
        this.loadPosts()
    },

    watch: {
        counter(newVal, oldVal){
            this.loadPosts()
        }
    },

    methods: {
        loadPosts(){
            axios.get('http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10')
                .then(response => {
                    this.posts = response.data
                })
        }
    }
}

Answer 4

To ensure your counter triggers the appropriate content loading, you must set up a watcher that calls a load method. This way, whenever the counter value changes, the correct posts will be loaded for the paginated results.

export default {
    name: 'app',
    data () {
        return{
            counter: 1,
            ...
        }
    },

    created(){
        this.loadPosts()
    },

    watch: {
        counter(newVal, oldVal){
            this.loadPosts()
        }
    },

    methods: {
        loadPosts(){
            axios.get('http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10')
                .then(response => {
                    this.posts = response.data
                })
        }
    }
}

Answer 5

Answer №3

Here is a helpful resource that may assist you: https://scotch.io/courses/getting-started-with-vue/vue-events-build-a-counter Although I am not familiar with Vue, it appears that implementing a function to load new data may be necessary.

Answer 6

Here is a helpful resource that may assist you: https://scotch.io/courses/getting-started-with-vue/vue-events-build-a-counter Although I am not familiar with Vue, it appears that implementing a function to load new data may be necessary.

The subsequent page fails to load. Issue with the pagination feature

Answer №1

Answer №2

Answer №3

Similar questions

Create a Vue component that integrates with "unpkg"

Updating data of a child component within a Vue parent component

Challenges Encountered with Random Image Generator in JavaScript

The number field is persisting with its content even after submitting, while the other fields successfully clear up

Displaying a Countdown in a Django Loop: A Step-by-Step

Encountering issues with pipes and ngModel functionality in Angular causing errors

Adapt vanilla JavaScript code to be compatible with Node.js, MongoDB, and Express framework

Utilizing PHP and JQuery Variables within the CodeIgniter Framework

Node.js UDP broadcast to subnet not working properly in Linux

Incorporating numerous dropdown menus to a table filled with data retrieved from a database

I am attempting to draw a correlation between two numerical variables

Is there a formatting error when pulling data from an API using Angular?

Prevent accordion expansion triggered by the More button click

Top method for transitioning project from Vue2 to Vue3

Designing an advanced remote upload system using jQuery AJAX and PHP

Guide on triggering a Bootstrap4 popup to appear upon window load in the absence of a set PHP session variable

Using a combination of look-arounds and tag omission for advanced parsing

Retrieving user input in React by utilizing the onChange event handler

Add every WebSocket message to a div element in VUE3

Securing Codeigniter with CSRF protection while using datatables and an AJAX URL