How to filter comments with vue.js?

Question

In my view i have this :

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

In my controller i have this:

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

In my vue i have this:

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

      },

What i want is when user select name or date, to change orderBy and then to display it in view without refresh. Any suggestion how can i do that?

EDIT: In my ready function i have:

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

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

So i cant sort by in vue.js, or can i?

Answer 1

You can use the Lodash sortBy method inside a computed property which acts as a filter. Lodash is included by default in the newest Laravel versions.

Your .vue file could look like this:

(NOTE: This is a Vue 2.0 example, if you are using a previous version of Vue some things can differ)

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