Hi there, I'm currently facing an issue while trying to paginate my data. The error message in my console reads:
Property or method "$index" is not defined on the instance but referenced during render.
Below is my HTML template where I display the data that I intend 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>
Here's my script tag for reference:
<script>
export default {
data() {
return {
current: 1,
heroes: [
{ name: "Wolverine", universe: "Marvel" },
{ name: "Batman", 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 {
...
}
},
setStatus: function(status) {
...
},
updateCurrent: function(i) {
...
},
updatePaginate: function() {
...
}
}
};
</script>
I originally found this example on CodePen and it worked well there. Here is the link to the CodePen example:
https://codepen.io/lorena-tapia/details/VwZzpRZ
If anyone has any suggestions on how to resolve this issue, please let me know. Thank you!