[Vuejs]-State of currentPage is changing after coming back to page in vue

by

0👍

currentPage will reset after you leave the page.
To prevent such a behavior you should open record page in new window/tab or save the currentPage value in cookies or localStorage.
If you prefer the latter I would advice you to use vuex-persistedstate

0👍

You should use @change attribute on your b-pagination component. If you bind it to a function returning items, it can use currentPage inside it to fetch the data for current page.

<b-pagination @change="fetchItems" ....>

Inside your component you could have a method

methods: {
   fetchItems () {
      // Use this.$store.getters.currentPage inside this function 
      // to fetch paginated data
      return items;
   }
}

You could also have a mount method to fetch paginated data using currentPage, this way you could fetch the data when you come back on page.

mounted () {
   fetchItems()
}

0👍

The issue is when you leave the component it goes back to the ether. When you come back to that component, the page is built again. You should use the lifecycle hook created() to retrieve the saveed page from the store. That way the currentPage variable will have the page set prior to rendering all of the elements. It’s probably better to use regular variable currentPage since there isn’t a need for it to be a computed function.

-1👍

You need to maintain a flag to achieve this using store/vuex.
Take a look at the code below. I hope this is something you were looking for 

<b-table show-empty
    outlined
    hover
    stacked="md"
    :sort-by.sync="sortBy"
    :items="companies"
    :fields="[
        {key: 'name', label: this.$t('shared.name'), sortable: true},
        {key: 'companyId', label: this.$t('shared.orgNumber'), sortable: true},
        {key: 'properties.state', label: this.$t('shared.status'), sortable: true}
    ]"
    :current-page="currentPage"
    :per-page="perPage"
    :filter="filter"
    v-bind:empty-text='$t("shared.emptyText")'
    v-bind:empty-filtered-text='$t("shared.emptyFilteredText")'
    @filtered="onFiltered"
    @row-clicked="showCompany"
    tbody-tr-class="row-cursor">
</b-table>

<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage"
    class="float-right"/>

data() {
    return {
      vuexStateApplied: false
    }
  }

methods: {
    onFiltered(filteredItems) {
      if (!this.vuexStateApplied && !this._.isEmpty(this.$store.getters.currentPage)) {
        this.currentPage = this.$store.getters.currentPage

        // By setting this flag we are ensuring not to 
        // apply same currentPage value again on  
        // filtering the table data
        this.vuexStateApplied = true
      }
    }
}

beforeRouteLeave() {
    // update with new value
    this.$store.commit('SET_CURRENT_PAGE', value);
}

OR

destoryed() {
    // update with new value
    this.$store.commit('SET_CURRENT_PAGE', value);
}

Leave a comment