在 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!

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