我如何在vue js中实现分页

Question

please i'm trying to paginate data but i'm getting this error in my console

Property or method "$index" is not defined on the instance but referenced during render.

this is my html template which displays the data in which i'll want to 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 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>

this is my script tag

<script>
export default {
 
  data() {
    return {

      current: 1,
      heroes: [
        { name: "Wolverine", universe: "Marvel" },
        { name: "Batman", universe: "DC" },
        { name: "Beast", universe: "Marvel" },
        { name: "Superman", universe: "DC" },
        { name: "Wonder Woman", universe: "DC" },
        { name: "Iceman", universe: "Marvel" },
        { name: "Black Panther", universe: "Marvel" },
        { name: "Beast Boy", universe: "DC" },
        { name: "Captain America", universe: "Marvel" },
        { name: "Hawkgirl", universe: "DC" },
        { name: "Cyclops", universe: "Marvel" },
        { name: "Green Lantern", universe: "DC" },
      ],
      paginate: 5,
      paginate_total: 0
    };
  },
  created() {
    this.paginate_total = this.heroes.length / this.paginate;
  },
  methods: {
    setPaginate: function(i) {
      console.log(i);
      if (this.current == 1) {
        return i < this.paginate;
      } else {
        return (
          i >= this.paginate * (this.current - 1) &&
          i < this.current * this.paginate
        );
      }
    },
    setStatus: function(status) {
      this.status_filter = status;
      this.$nextTick(function() {
        this.updatePaginate();
      });
    },
    updateCurrent: function(i) {
      this.current = i;
    },
    updatePaginate: function() {
      this.current = 1;
      this.paginate_total = Math.ceil(
        document.querySelectorAll("tbody tr").length / this.paginate
      );
    }
  }
};
</script>

i got the example from codepen which works fine when using it on codepen but i'm getting an error in my code,here's the link

https://codepen.io/lorena-tapia/details/VwZzpRZ

please how can i go about this

Answer 1

The $index is not defined anywhere, you could define it in the v-for loop like:

<tr v-for="(hero,index) in heroes " v-show="setPaginate(index)">
    <td>{{ hero.name }}</td>
    <td>{{ hero.universe }}</td>
</tr>