Load more button in vuejs

Question

I receive from php an array with customer reviews:

var comment_list = new Vue({

el: \'#comment-list\',

 data: {
    testimonials: JSON.parse(\'{!! addslashes(j         


        

Answer 1

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

new Vue({
  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
    };
  }  
})

  
 
    
{{reviews[commentIndex - 1].name}} says:
    
{{reviews[commentIndex - 1].description}}
    

  
  show more reviews

I hope this helps!