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(json_encode(array_reverse($product_info['testimonials'])))!!}'),
 },

 methods: {
    colorAvatar: function(letter) {
        return 'avatar-' + letter.toLowerCase();
    },
    starClass: function(star) {
        return 'star-' + star;
    }
  }
});

I want to create a button to load more and show comments ten by ten.

How can I do it?

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div class="container vue">
  <div v-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!