How to keep pagination on page reload?

Question

Vue.js

There is a vuetify table component:

<v-data-table
      :headers="headers"
      :items="tableData"
      :items-per-page="5"
      class="elevation-1"
      :loading="loadingTable"  
      loading-text="Загрузка данных, подождите..."
      no-data-text="Отсутствуют данные"
      :footer-props="{      
        itemsPerPageOptions: [5, 10, 15],
      }"
    >
      <template v-slot:item.type="{ item }">
        <span 
          class="typeText" 
          :class="{
            'redText': item.type === 'Расходы',
            'greenText': item.type === 'Доходы',
          }"
        >{{ item.type }}</span>
      </template>
      
      <template v-slot:item.open="{ item }">
         <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn text icon color="gray"  v-on="on" @click="clickHandler(item)">
                <v-icon>mdi-open-in-new </v-icon>
              </v-btn>
            </template>
            <span>Подробнее</span>
          </v-tooltip>          
      </template>
    </v-data-table>

The question is the following, I want to save the number of the current pagination page in the query parameters so that the current pagination is saved when reloading. From the docks, I didn’t quite understand how to set the pagination page (for example, the 2nd or 3rd). And how to set a forward arrow click handler to set the query parameter

Answer 1

how to set pagination page (for example 2nd or 3rd)

Add the page property to the component:

data: () => ({
  page: 1,
  ...
}),

Attach it to a table:

<v-data-table
  :page.sync="page"
  ...

Then just set the page value - the table will show the corresponding page.

how to set handler on click on forward arrow

No click handlers needed. Watch the page value:

watch: {
  page(val) {
    ...
  },
},