如何使用 vue.js 过滤评论？答案

【问题标题】：How to filter comments with vue.js?如何使用 vue.js 过滤评论？
【发布时间】：2017-01-13 11:08:01
【问题描述】：

在我看来，我有这个：

  <select class="sort_by">
       <option selected disabled>SORT BY</option>
       <option value="name" >Name</option>
       <option value="date">Date</option>
  </select>

在我的控制器中我有这个：

   $comments = $article->comments()->orderBy('created_at','desc')->get();

在我的 vue 中我有这个：

 loadComments: function () {
        articleid = this.article_id;
        this.$http.get('/article/'+ articleid +'/allcomments').then(function(response){
            // True
          data = response.data.comments;
          this.$set('all_comments', data);
          this.comments= data;


        }, function(response){
            // False
        });

      },

我想要的是当用户选择名称或日期时，更改orderBy，然后在不刷新的情况下将其显示在视图中。有什么建议我该怎么做？

编辑：在我准备好的功能中，我有：

this.loadComments();
          setInterval(function () {

           this.loadComments();
         }.bind(this), 20000);

所以我不能在 vue.js 中排序，或者我可以吗？

【问题讨论】：

Lodash 是这些东西的好朋友，它和 Vue 一样包含在默认的 Laravel 项目中。 lodash.com/docs/4.17.4#sortBy
我不知道这是我需要的，因为在我准备好的函数中，我每 n 秒加载一次 cmets，如果我这样做，我将只获得第一次过滤器，但下次当 cmets加载后我会得到默认排序...
好的，等一下，我会写答案的。
将 v-model 属性添加到 v-model="filter" 之类的选择中，然后在需要时通过 v-for="comment in comments | filterBy filter" 传递给组件来过滤此参数的输出
它不适合我

标签： laravel laravel-5 laravel-5.2 vue.js

【解决方案1】：

您可以在作为过滤器的计算属性中使用Lodash sortBy method。 Lodash 默认包含在最新的 Laravel 版本中。

您的.vue 文件可能如下所示：

（注意：这是一个 Vue 2.0 示例，如果您使用的是 Vue 的早期版本，可能会有所不同）

<template>

    <select v-model="sortingBy" class="sort_by">
        <option selected disabled>SORT BY</option>
        <option value="name">Name</option>
        <option value="date">Date</option>
    </select>

    <div v-for="comment in sortedComments">
        // Here your HTML for each comment
    <div>

</template>

<script>
    export default {

        data() {
            return{
                comments: {},
                sortingBy: "name", // Default sorting type
            }
        },

        computed: {
            sortedComments: function () {
                return _.sortBy(this.comments, [this.sortingBy]);
            }
        },

        mounted() {
            this.loadComments();
            setInterval(function () {
                this.loadComments();
            }.bind(this), 20000);
        },

        methods: {
            loadComments: function () {
                this.$http.get('/article/' + this.article_id + '/allcomments').then((response) => {
                    this.comments = response.data;
                });
            },
        }
    }
</script>

【讨论】：

我没有使用 vue 2.0 它的 1.0.26