Vue JS -数据未进行反应性更新

Question

例如，我有一个分页指示器，显示给定页面上的结果数量；页面1显示'1-5‘，页面2显示’50个结果中的6-10个‘等等。

我已经将逻辑设置到位，并且看起来工作正常，但是，为了在除第1页之外的任何其他页面上更新结果，我必须每次都刷新该页面。因此，'1-5‘总是出现。我还在学习vue，我相信这一定是个愚蠢的错误。当我更改页面时，我可以做些什么来更新结果？

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

您应该将data:() =>{...替换为data(){...}

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