VueJS - filtering


I have JSON file that contains some objects.One that I’m interested in, and that I use for filtering is paid. It could have value that is equal to 0 (mean not paid), and equal to 1 (mean paid).

The problem is that I have to output the all not paid items, + additional 20 paid items

<tr v-for="item in items | filterBy searchInvoice | filterBy '0' in 'paid' ">
    <!--Nothing important here-->

This works but if I try to add additional filterBy '1' in 'paid | limitBy 20 it doesn’t work, for sure.

Any idea ? Thanks.

I tried to create the custom Vue filter, but they doesn’t want to work together

Vue.filter('openedInvoices', function(value,paid) {
    return value.filter(function(item) {
        return item.paid == paid;


Computed properties did the trick :slight_smile:

1 Like

Hm one tricky thing here.

The output is limited to 20 items, but there are much more in the json file.The computed property looks like this:

computed: {
    filteredItems: function() {

        return this.items

            .filter(function(item) {
                return item.paid == 0 || item.paid == 1;

            .slice(0, 20);


It works but now I want to make the button that would show all items from json file, I tried to make a new method like this:

filterAll: function(invoicenr) {
      this.allInvoice = invoicenr;

Note: allInvoice is set to empty string in data.

Then set this to li element

filterBy allInvoice in 'invoicenr'

and make event like this

<a href="#" @click.prevent="filterAll('')">Show all</a>

But no luck.

I did same thing for filter the only not paid items, and it works.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.