How to update the record range in a vuetify data table manually?

Question

I have a v-data-table like in this example https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side server-side pagination and sorting. I have a couple of dropdowns that work as filters for the same API which populates the same data table. My issue is when I change the filter the record range gets a wrong value. Is there a way to reset all the footer components. I checked the docs I couldn't find a way.

Answer 1

You can force the component re-render with a key attribute.

So declare your component like:

<template>
  <data-table :key="componentKey" />
</template>

<script>
export default {
  data(){
    return {
      componentKey: 0 
    }
 }
}
</script>

Then increase your componentKey to force the re-render.