How to retrieve filtered items in Vuetify Datatable

Question

Hi,

I have a vuetify datatable (backend Laravel) which has a filter on a column. I need to fetch the filtered data in the datatable and pass it to backend to generate a pdf.

I tried using current-items event on vuetify datatable but the result was incorrect. It only returns filtered data on first page.

Here is my "https://codepen.io/prasadchinwal5/pen/eYmbvYb". Please enter value 500 in the Less than filter under calories column and check the console.

Any help is appreciated.

Screll Screll · Accepted Answer · 2020-01-22T19:18:12

You would take your underlying dataset and compute the array based on the same filter(s) used within the v-data-table column definition. ie.

computed:{    
    currentItems(){
      return this.desserts.filter(val=>val.calories < parseInt(this.calories))
    },
   currentItemsWithSearch(){
      return this.currentItems.filter(val=> 'search logic here')
    }       
}

The currentItems value should then match the table's data. This is applying a second & separate filter, similar to what you have done on the column definitions.

 {
          text: 'Calories',
          value: 'calories',
          filter: value => {
            if (!this.calories) return true

            return value < parseInt(this.calories)
          },
        }

Ideally, you would want to use the currentItems array as your data table items input, to account for the 'search' field you could chain further filters (search) on the computed output. This would perform less-than calorie filtering in a single place.

<v-data-table :items="currentItems" />

How to retrieve filtered items in Vuetify Datatable

Hi,

1 Answers