在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 < reviews.length" v-for="commentIndex in commentsToShow"> 
    <div>{{reviews[commentIndex].name}} says:</div>
    <i><div>{{reviews[commentIndex].description}}</div></i>
    <hr />
  </div>
  <button @click="commentsToShow += 2">show more reviews</button>
</div>

我希望这会有所帮助！

Answer 2

正确的方法是使用AJAX，并在每次单击按钮时发送请求。

您需要创建一个Web服务终结点（例如leaflet(quakes) %>% addTiles() %>% addMarkers( options = markerOptions(mag = ~mag), clusterOptions = markerClusterOptions( iconCreateFunction=JS("function (cluster) { var markers = cluster.getAllChildMarkers(); var sum = 0; for (i = 0; i < markers.length; i++) { sum += Number(markers[i].options.mag); // sum += 1; } return new L.DivIcon({ html: '<div><span>' + sum + '</span></div>'}); }") ) ) ）并发送此Web服务的代码，并以JSON格式发送注释。 您还可以添加参数/api/comments以将其划分为十个，第1页是前十个，第2页是后十个，依此类推。

然后，您需要将单击事件处理程序分配给“加载更多”按钮，该按钮会将请求发送到该Web服务。 您可以在这里像这样使用axios：

?page=1