Как сохранить пагинацию при перезагрузке страницы?

Question

[Виктор]

Есть компонент таблицы vuetify:

<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>

Вопрос следующий, номер текущей страницы пагинации хочу сохранять в query параметрах, чтобы при перезагрузке сохранялась текущая пагинация. Из доков не совсем понял как установить страницу пагинации (к примеру 2-ую или 3-ю). И как установить обработчик на клик по стрелке вперед, чтобы задать query параметр

Answer 1

[0xD34F]

как установить страницу пагинации (к примеру 2-ую или 3-ю)

Добавляете в компонент свойство page:

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

Цепляете его к таблице:

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

Дальше просто устанавливайте значение page - таблица будет показывать соответствующую страницу.

как установить обработчик на клик по стрелке вперед

Не надо обработчиков клика. Следите за значением page:

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

Comments

[Виктор]

Спасибо, помогло, только при первом монтировании надо дождаться пока загрузится таблица и только после этого менять page.