javascript - 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

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

要使其正常工作，请先将 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