CODEWITHSUNDEEP
javascriptvue.jspaginationaxios
Andrey Belichenko
Andrey Belichenko

Reputation: 87

Next page does not open. Problem with pagination

I need to make a pagination in my task, but it is not working.

I made two buttons to which I attached the "click" event and I registered a property in the "data". When I click on the buttons, the property changes and is written to the link and in the same way changes the current 10 posts to the following.

But for some reason it does not work as it should work. Can someone please explain what my mistake is and if you can suggest some articles on the subject of "pagination".

This is 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 my Vue:

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

Upvotes: 1

Views: 1447

Answers (3)

Cosmin
Cosmin

Reputation: 474

The created method is called only when the component is created. To make the GET request everytime the counter increase or decrease use watches link.

Your example will become:

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

Upvotes: 1

David Moreno Cortina
David Moreno Cortina

Reputation: 146

Maybe this can help you. https://scotch.io/courses/getting-started-with-vue/vue-events-build-a-counter I don't know vue, but looks like you need a function to load new data

Upvotes: 0

Steve O
Steve O

Reputation: 5784

You need to create a watcher for your counter that fires a load method. This way every time your counter changes you'll load in the correct posts for the page in your 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
                })
        }
    }
}

Upvotes: 1

Related Questions