Как вернуть исходный вид таблицы vuetify?

Question

У меня есть таблица следующего типа

<template>
   <div>
      <v-card-actions>
            <template>

                <v-dialog v-model="dialog" persistent max-width="500px">
                  <v-card>
                    <v-card-text>
                      <v-container>
                        <v-row class="tableInfo">
                            <v-data-table
                                :headers="headers"
                                :items="array"
                                :items-per-page="5"
                                item-key="id"
                                class="elevation-1"
                            >
                                <template v-slot:top>
                                    <v-toolbar dark color="light-blue">
                                        <v-toolbar-title>Пример таблицы</v-toolbar-title >
                                        <v-divider 
                                        class="mx-3"
                                        inset
                                        vertical
                                        >
                                        </v-divider>
                                    </v-toolbar>
                                </template>

                            </v-data-table>

                        </v-row>
                      </v-container>
                    </v-card-text>

                    <v-card-actions>
                      <v-spacer></v-spacer>

                        <v-btn
                        text
                        @click="close"
                        >
                          Закрыть
                        </v-btn>

                    </v-card-actions>
                  </v-card>
                </v-dialog>
            </template>
      </v-card-actions>
    </div>
</template>

Она у меня лежит в диалоговом окне. Когда я листаю страницы в таблицы, например до 5 листа и закрываю. То при следующем открытие таблица открывается с того листа на котором я остановился. Как сделать так что бы при закрытие диалогового окна сбросилась страницы таблицы?

Answer 1

Решение следующие в таблицу

                    <v-data-table
                        :page.sync="numbPages"
                        :items-per-page.sync="perPages"
                    >

Значения numbPages и perPages положи в date и там присвой необходимые данные например

data: () => ({
      numberPage: 1,
      perPage: 7,
})

Семь колонок и первая страница. Потом в methods при закрытие окна присвоение других значений и будет тебе счастье.

БЛОГ НА HUSL

Как вернуть исходный вид таблицы vuetify?

Ответы (1 шт):