CODEWITHSUNDEEP
sortingvuejs2
Evis
Evis

Reputation: 561

Vuejs 2 using filterBy and orderBy in the same computed property

I am having a hard time trying to joing a filterBy with orderBy, on vuejs 2.0, with all research I have found about this subject, as of link on the bottom of my question.

This is my filter, which is working:

// computed() {...
filteredResults() {
    var self = this
    return self.results
        .filter(result => result.name.indexOf(self.filterName) !== -1)
}

A method called in the component:

// methods() {...
customFilter(ev, property, value) {
    ev.preventDefault()
    this.filterBook = value
}

In the component:

// Inside my component
<a href="#" @click="customFilter($event, 'name', 'Name..')">Name..</a>

And another filter, which works as well:

// computed() {...
orderByResults: function() {
    return _.orderBy(this.results, this.sortProperty, this.sortDirection)
}

To comply with my orderBy I have this method:

// methods() {...
sort(ev, property) {
    ev.preventDefault()
    if (this.sortDirection == 'asc' && this.sortProperty == property ) {
        this.sortDirection = 'desc'
    } else {
        this.sortDirection = 'asc'
    }
    this.sortProperty = property
}

And to call it I have the following:

// Inside my component
<a href="#" @click="sort($event, 'name')">Name..</a>

I have found in the docs how we use this OrderBy, and in this very long conversation how to use filter joint with sort, but I could really not implement it...

Which should be some like this:

filteredThings () {
    return this.things
      .filter(item => item.title.indexOf('foo') > -1)
      .sort((a, b) => a.bar > b.bar ? 1 : -1)
      .slice(0, 5)
  }

I could not make this work...

I tried in many forms as of:

.sort((self.sortProperty, self.sortDirection) => this.sortDirection == 'asc' && this.sortProperty == property ? this.sortDirection = 'desc' : this.sortDirection = 'asc' )

But still, or it does not compile or it comes with errors, such as:

property not defined (which is defines such as I am using it in the other method) method of funcion not found (is happens when comment my method sort.. maybe here is what I am missing something)

Thanks for any help!

Upvotes: 1

Views: 9532

Answers (1)

Aletheios
Aletheios

Reputation: 4020

The ideas of your approach seem valid, but without a full example it's hard to tell what might actually be wrong.

Here's a simple example of sorting and filtering combined. The code can easily be extended e.g. to work with arbitrary fields in the test data. The filtering and sorting is done in the same computed property, based on the parameters set from the outside. Here's a working JSFiddle.

<div id="app">
    <div>{{filteredAndSortedData}}</div>
    <div>
        <input type="text" v-model="filterValue" placeholder="Filter">
        <button @click="invertSort()">Sort asc/desc</button>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                testData: [{name:'foo'}, {name:'bar'}, {name:'foobar'}, {name:'test'}],
                filterValue: '',
                sortAsc: true
            };
        },
        computed: {
            filteredAndSortedData() {
                // Apply filter first
                let result = this.testData;
                if (this.filterValue) {
                    result = result.filter(item => item.name.includes(this.filterValue));
                }
                // Sort the remaining values
                let ascDesc = this.sortAsc ? 1 : -1;
                return result.sort((a, b) => ascDesc * a.name.localeCompare(b.name));
            }
        },
        methods: {
            invertSort() {
                this.sortAsc = !this.sortAsc;
            }
        }
    });
</script>

Upvotes: 7

Related Questions