map.set - array.slice 返回太多项目

Question

我正在开发一个 vue 项目，并尝试为表格实现分页。
出现错误，我无法弄清楚代码有什么问题。

我在一个简化的例子中重现了这个问题：https://codesandbox.io/s/rj23rqp2k4

问题是，当将设置更改为每页 10 个，然后再改回每页 5 个时，第二页上有 6 个项目，而不是 5 个。

HTML：

<template>
  <div id="app">
    <button @click="currentPage-=1">Previous</button>
    <button @click="currentPage+=1">Next Page</button>
    <select v-model="perPage">
      <option value="5">5 per page</option>
      <option value="10">10 per page</option>
    </select>
    <hr>
    <ul v-for="item in pages.get(currentPage)" :key="item">
      <li>
        <strong>{{ item }}</strong>
      </li>
    </ul>
    <hr>
    <h5>Current Page: {{currentPage}}</h5>
  </div>
</template>

脚本：

<script>
export default {
  name: "App",

  data() {
    return {
      data: ["a1","b2","c3","d4","e5","f6","g7","h8","i9","j10","k11"],
      perPage: 5,
      currentPage: 1
    };
  },

  computed: {
    numberOfPages: function() {
      let x = this.data.length / this.perPage;
      if (x % 1 !== 0) {
        x = Math.floor(x) + 1;
      }
      return x;
    },
    pages: function() {
      let pgs = new Map();
      for (
        let index = 0, start = 0, end = this.perPage;
        index < this.numberOfPages;
        index++
      ) {
        pgs.set(index + 1, this.data.slice(start, end));
        start += this.perPage;
        end += this.perPage;
      }
      return pgs;
    }
  }
};
</script>

似乎错误必须在页面功能中，因为一页上有 6 个项目，并且不应该是这种情况。

Answer 1

尝试只使用start 并将this.perPage 添加到它作为结束索引：

 pages: function() {
      let pgs = new Map();
      for (
        let index = 0, start = 0 ;
        index < this.numberOfPages;
        index++
      ) {
        pgs.set(index + 1, this.data.slice(start, start + this.perPage));
        start += this.perPage;           
      }
      return pgs;
    }

Answer 2

通过下拉列表更改值perPage 后它不再工作的原因是perPage 的值变成了string 而不是number。

要使其工作，请先将this.perPage 的值转换为number，然后再使用它，如下例所示。

pages: function() {
  let pgs = new Map();
  const perPage = Number(this.perPage);
  for (
    let index = 0, start = 0, end = perPage;
    index < this.numberOfPages;
    index++
  ) {
    pgs.set(index + 1, this.data.slice(start, end));
    start += perPage;
    end += perPage;
  }
  return pgs;
}

您还可以调整@charliefl 的解决方案以使其更清洁，但请务必进行转换。

见working implementation