在 vuejs 中加载更多按钮答案

【问题标题】：Load more button in vuejs在 vuejs 中加载更多按钮
【发布时间】：2018-11-11 06:48:39
【问题描述】：

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

我想创建一个按钮来加载更多内容并以十乘十的方式显示 cmets。

我该怎么做？

【问题讨论】：

看起来你将不得不在后端实现一个 API，然后使用像 axios 或 fetch 这样的库来根据你最后的评论从所说的 API 中获取更新已获取
我知道，但是我没有注释api，它只是php中的一个数组。你能想到什么吗？
Ajax 确实是最有效的方法。否则，您可以在初始页面加载时加载所有 cmets，然后只显示前 3 个，然后当他们单击一个按钮时，再显示 3 个，依此类推

标签： javascript vue.js vuejs2

【解决方案1】：

没有 API，并且在初始加载时加载所有 cmets：

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>

我希望这会有所帮助！

【讨论】：

我想添加代码段以在显示所有记录时隐藏显示更多评论按钮。如果有人也有兴趣知道那部分。 new Vue({ el: ".vue", data() { return { reviews: [] commentsToShow: 2 showMore: true, }; }, viewMore() { this.commentsToShow += 9 this.showMore = this.commentsToShow === this.users.length }, }) <button v-if="showMore" @click="viewMore">show more reviews</button>

【解决方案2】：

正确的方式是使用AJAX，每次点击按钮都发送一个请求。

您需要创建一个 Web 服务端点（例如 /api/comments）并发送此 Web 服务的代码，将 cmets 作为 JSON 发送给您。也可以加参数?page=1可以分十位，第1页为前十位，第2页为后十位，以此类推。

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

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

【讨论】：

我知道，但是我没有注释api，它只是php中的一个数组。你能想到什么吗？
您可以使用两个数据变量，testimonials 和 visible_testimonials，然后每个按钮单击将后十个从 testimonials 移动到 visible_testimonials