小编Tec*_*Dev的帖子

我是 Vue 和数组的新手。我想对 json 数组进行分页，并将其限制为每页仅 10 个项目。然而在我的<tr>身体中它显示了数组中的所有列表。我尝试了其他方法，但没有成功。谁能帮我找到对这个 json 数组进行分页并反映在我的表格中的最佳方法？谢谢。

这是代码：

https://codesandbox.io/s/exciting-kapitsa-8d46t?file=/src/App.vue:1415-2437

应用程序.vue

<template>
  <div id="app">
    <table class="table t3">
      <thead class="thead">
        <tr class="tr">
          <th class="td no" width="10%">
            <span class="has-text-orange">No</span>
          </th>
          <th class="td">
            <span class="has-text-orange">Name</span>
          </th>
        </tr>
      </thead>
      <tbody
        class="searchable tbody"
        style="max-height: 200px; min-height: 200px"
      >
        <tr class="tr" v-for="(p, index) in alphabets" :key="index">
          <td class="td no" width="10%">{{ ++index }}</td>
          <td class="td">{{ p.letter }}</td>
        </tr>
      </tbody>
    </table>
    <div class="column is-12">
      <nav
        class="pagination is-right"
        role="navigation"
        aria-label="pagination"
      >
        <ul class="pagination-list">
          <li>
            <a @click="prev"> …