Vue.js分页实现报错：$index未定义，求解决方法

算力阿峰

2026-8-18

解决Vue分页中$index未定义的错误

问题原因

你使用的是Vue 2.x或更高版本，但示例代码基于Vue 1.x编写。Vue 2.x已移除$index这类隐式循环索引变量，必须在v-for中显式声明才能使用索引值。

修复步骤

1. 修改列表循环的`v-for`语法

将模板中tbody区域的v-for改为显式声明索引的形式，同时把v-show里的$index替换为显式定义的索引变量：

<tr
  v-for="(hero, index) in heroes"
  v-show="setPaginate(index)"
>

2. 修正分页总数的计算逻辑

原代码中paginate_total的计算会出现小数（比如12条数据每页5条，结果为2.4），需在created钩子中取整：

created() {
  this.paginate_total = Math.ceil(this.heroes.length / this.paginate);
}

修复后的完整模板代码

<div id="heroes">
      <table class="table table-striped">
        <thead>
          <tr>
            <td>Hero Name</td>
            <td>Universe</td>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(hero, index) in heroes"
            v-show="setPaginate(index)"
          >
            <td>{{ hero.name }}</td>
            <td>{{ hero.universe }}</td>
          </tr>
        </tbody>
      </table>
      <div id="pagination">
        <a
          href="#"
          class="btn btn-default"
          v-for="page_index in paginate_total"
          @click.prevent="updateCurrent(page_index + 1)"
        >
          {{ page_index + 1 }}
        </a>
      </div>
    </div>