javascript - 在 vuejs 中加载更多按钮

Question

我从 php 收到一个包含客户评论的数组:

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

我想创建一个按钮来加载更多内容并十个显示评论。

我该怎么做？

Answer 1

没有 API，并在初始加载时加载所有评论:

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>

希望对您有所帮助!