У меня есть таблица с данными людей:
<tr v-for="person of displayedPersons()" :key="person.id">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>{{ person.email }}</td>
<td>{{ person.phone }}</td>
</tr>
props: ['tableType', 'smallTable', 'bigTable'],
data() {
return {
database: [],
paginatedDb: []
}
},
methods: {
displayedPersons() {
if (this.database.length == 0) {
this.addDataInTable()
}
this.paginatePersons()
return this.paginatedDb
},
addDataInTable() {
if (this.tableType == 'small') {
this.database = this.smallTable
}
else if (this.tableType == 'big') {
this.database = this.bigTable
}
},
paginatePersons() {
let start = this.pageNumber * this.pageSize - this.pageSize
let end = this.pageNumber * this.pageSize
this.paginatedDb = this.database.slice(start, end)
}
}
Данные берутся из метода, а не напрямую из массива, тк:
- Данные большой и малой таблиц берутся из родительского компонента, и если присвоить их напрямую в массив data через mounted, то там будет пусто, тк данные в родителе берутся через fetch (можно это как-то обойти?)
- В методе обрабатывается пользовательская пагинация, и отображается только нужная страница из таблицы
В итоге всё работает нормально, таблица рендерится как надо, но в консоли висит ошибка, указанная в названии. Как её пофиксить?
paginatedDb