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?

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?

• javascript
• vue.js
• vuejs2

• Looks like you're going to have to implement an API on the back end, then use a library like axios or fetch to grab the updates from said API based on the last comment you fetched – Derek Pollard Commented Nov 11, 2018 at 7:00
• I know, but I don't have a comment api, it's just an array in php. Can you think of anything? – RichardMiracles Commented Nov 11, 2018 at 7:08
• Ajax really is the most efficient way to do this. Otherwise, you can load all of the comments on the initial page load, then only display the first 3, then when they click a button, display 3 more and so on – Derek Pollard Commented Nov 11, 2018 at 7:10

2 Answers 2

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!

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