Vue JS - 数据没有被动更新

Question

I have a pagination indicator that shows the number of results on a given page, for example; page 1 would show '1-5' and page 2 shows '6-10 out of 50 results' etc.

I have set the logic in place and it appears to be working, however for the results to update on any other page except for page 1, I would have to refresh the page every time. Therefore '1-5' always appears. I'm still learning vue and I'm sure it must be some silly mistake here. What can I do to have the results update when I change page?

Pagination.vue

<!-- Results counter -->
    <PaginationResultIndicator :total-items="paginationData.totalItems"
                               :first-item="firstItem"
                               :last-item="lastItem"/>


// Script
data: () => ({
    currentPage: -1,
    limit: undefined,
    firstItem: undefined,
    lastItem: undefined
  }),

created() {
    this.currentPage = this.paginationData.current; 
    this.limit = this.paginationData.totalItems / this.paginationData.totalPages
    this.lastItem = this.limit * this.paginationData.current;
    this.firstItem = this.lastItem - this.limit + 1;
  },

Answer 1

Your should replace data:() =>{... to data(){...}

https://v2.vuejs.org/v2/style-guide/index.html#Component-data-essential