Load More Button In Vuejs

I receive from php an array with customer reviews: var comment_list = new Vue({ el: '#comment-list', data: { testimonials: JSON.parse('{!! addslashes(json_encode(array_rever

Solution 1:

Without an API, and loading all the comments on the initial load:

newVue({
  el: ".vue",
  data() {
    return {
      reviews: [{name: 'Derek', description: 'Some comment'}, {name: 'Joe', description: 'Some comment'},{name: 'Mike', description: 'Some comment'}, {name: 'Ron', description: 'Some comment'},{name: 'Dii', description: 'Some comment'}, {name: 'Lonnie', description: 'Some comment'},{name: 'Paul', description: 'Some comment'}, {name: 'Mike', description: 'Some comment'},{name: 'Jody', description: 'Some comment'}, {name: 'Ryn', description: 'Some comment'},{name: 'Jord', description: 'Some comment'}, {name: 'Milly', description: 'Some comment'},{name: 'Judy', description: 'Some comment'}, {name: 'Vanilly', description: 'Some comment'},{name: 'Nolan', description: 'Some comment'}, {name: 'Pino', description: 'Some comment'},{name: 'Ryne', description: 'Some comment'}, {name: 'Scott', description: 'Some comment'},{name: 'Son', description: 'Some comment'}, {name: 'Bann', description: 'Some comment'},],
      commentsToShow: 2
    };
  }  
})

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><divclass="container vue"><divv-if="commentIndex <= commentsToShow"v-for="commentIndex in commentsToShow"><div>{{reviews[commentIndex - 1].name}} says:</div><i><div>{{reviews[commentIndex - 1].description}}</div></i><hr /></div><button @click="commentsToShow += 2">show more reviews</button></div>

I hope this helps!

Solution 2:

The correct way is using AJAX, and send a request each button click.

You need to create an web service endpoint (for example /api/comments) and send the code of this web service send you the comments as JSON. You may also add parameter ?page=1 to be able to divide it to tens, page 1 is the first ten, page 2 is the second ten and so on.

Then, you need to assign on click event handler to the "load more" button, that should sends the request to that web service. You can use axios here like this:

axios.get('/api/comments').then(res => {
    /* returned data will be in res.data *//* it should contain the comments array you sent in the web service */this.testimonials = res.data;
});