Question

在我看来，我有这个：

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

在我的观点中，我有这个：

 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中排序，或者我可以吗？

Answer 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.js过滤评论？

1 个答案: