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

我希望这有帮助！

Answer 2

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

您需要创建一个 Web 服务端点（例如/api/comments ）并将此 Web 服务的代码以 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;
});