Как предотвратить автоматическую перезагрузку Bootstrap - Vue нумерации страниц - PullRequest
Новая
       30

Как предотвратить автоматическую перезагрузку Bootstrap - Vue нумерации страниц

0 голосов
/ 04 мая 2020

У меня несколько представлений, и я хочу сохранить состояние для каждого из них, чтобы пользователю больше не приходилось делать одни и те же вещи.

На одном из них у меня есть таблица, и я использую компонент bootstrap -pagination для разбиения на страницы, поэтому, когда пользователь меняет страницу, я отправляю запрос на сервер для новых данных. Я храню параметры сортировки и фильтрации в Vuex, и это хорошо работает.

Но когда я хочу сохранить текущую страницу таким образом, bootstrap -pagination меняет ее на 1 каждый раз, когда я меняю вид и go назад Можно ли предотвратить такое поведение?

Вот код в HTML: 

<b-pagination v-if="currentPage!=-1"
            v-model="currentPage"
            :total-rows="totalRows"
            :per-page="perPage"
            aria-controls="my-table"
            pils
            align="center"
            class="ml-auto mr-auto"
          ></b-pagination>

и код в javascript: 

  data: function () {
      return {
        ...
        currentPage: this.$store.state.currentPage,
        ...
      }
    },

    ...

    watch: {
        currentPage: function(){
                this.$store.commit('updateCurrentPage', this.currentPage);
                this.getData();
              },
    }

1 Ответ

1 голос
/ 05 мая 2020

Проблемы, с которыми вы сталкиваетесь, вероятнее всего связаны с порядком загрузки и установки ваших данных.

Когда ваш компонент инициализируется, вы сразу устанавливаете свойство страницы currentPage, в то время как ( Я предполагаю) установив свойство totalRows через некоторое время, после извлечения ваших данных из вашей базы данных.

Это вызывает проблемы, потому что разбиение на страницы будет считать, что есть 0 строк. Поэтому, когда вы установите его на страницу 5. Он проверит свойства perPage и totalRows, а поскольку страницы 5 (пока нет), он автоматически установит currentPage обратно на страницу 1.

Вместо этого я бы порекомендовал установить currentPage на значение из вашего магазина ПОСЛЕ того, как вы извлекли свои данные, и установить свойство totalRows. Это должно исправить проблему, с которой вы столкнулись.

...