Bootstrap-Vue 페이지 지정이 자동으로 재설정되지 않도록 하는 방법

Bootstrap-Vue 페이지 지정이 자동으로 재설정되지 않도록 하는 방법

나는 여러 개의 뷰를 가지고 있고 각각의 뷰에 대한 상태를 저장하기를 원하기 때문에 사용자는 동일한 작업을 다시 수행할 필요가 없다.

그 중 한 곳에는 테이블이 있고 페이지 지정에는 부트스트랩-페이징 컴포넌트를 사용하기 때문에 사용자가 페이지를 변경하면 서버에 새 데이터를 요청해서 보낸다.나는 Vuex에 sort와 filter parameters를 저장하고 있는데 잘 작동한다.

하지만 내가 현재 페이지를 그렇게 저장하려고 할 때, 내가 보기를 변경하고 돌아갈 때마다 부트스트랩-페이징이 1로 바뀐다.그 행동을 예방하는 것이 가능한가?

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>

그리고 자바스크립트로 부호화한다.

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

    ...

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

현재 직면하고 있는 문제는 데이터가 로드되고 설정되는 순서에 따라 달라질 수 있다.

구성 요소가 초기화되면currentPage속성을 즉시 호출하는 동안(아마도)totalRows나중에 데이터베이스에서 데이터를 가져온 후 속성.

페이지 번호 매기기가 0행이라고 생각하기 때문에 이것은 문제를 일으킨다.그래서 5페이지로 설정하면.그것은 그것을 확인할 것이다.perPage그리고totalRows속성, 그리고 5페이지가 없기 때문에 자동으로 설정된다.currentPage1페이지로 돌아가다.

대신, 나는 네가 그 세팅을 하는 것을 추천하고 싶다.currentPage데이터를 검색하고 다음 값을 설정한 후totalRows재산이것은 당신이 겪고 있는 문제를 해결할 것이다.

또 다른 일은 a를 넣는 것이다.v-if다음을 확인하는 페이지 지정 요소totalRows이미 결정되었어이렇게 하면 페이지 지정 요소가 다음 이후에 렌더링됨totalRows가치가 알려져 있다AJAX를 사용하여 데이터를 로드하고 미리 행 수를 모를 때 유용하다.

예)

<b-pagination
  v-if="totalRows > 0"
  v-model="currPage"
  :total-rows="totalRows"
  :per-page="perPage"
  aria-controls="my-table"
  size="sm"
  limit="7"
  first-number
  last-number
  >
</b-pagination>

참조URL: https://stackoverflow.com/questions/61599481/how-to-prevent-bootstrap-vue-pagination-from-automatically-resetting