0

У меня есть таблица с данными людей:

<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)
    }
}

Данные берутся из метода, а не напрямую из массива, тк:

  1. Данные большой и малой таблиц берутся из родительского компонента, и если присвоить их напрямую в массив data через mounted, то там будет пусто, тк данные в родителе берутся через fetch (можно это как-то обойти?)
  2. В методе обрабатывается пользовательская пагинация, и отображается только нужная страница из таблицы

В итоге всё работает нормально, таблица рендерится как надо, но в консоли висит ошибка, указанная в названии. Как её пофиксить?

3
  • может проблема не в этом компоненте?
    – Dmytro
    Commented 17 сент. 2020 в 17:31
  • @Дмытрык я так думаю, что в этом. Если убрать функцию addDataInTable, и загружать данные smallData в хуке mounted, то ошибка исчезает. Получается ошибка исходит из if-ов внутри этой функции, но как с этим быть?)
    – Altereyo
    Commented 17 сент. 2020 в 18:38
  • попробуй итетировать не результат выполнения функции, а сам массив paginatedDb
    – Dmytro
    Commented 18 сент. 2020 в 4:44

1 ответ 1

0

Т.к. функция displayedPersons() возвращает значение, нужно было её переместить из methods в computed, и убрать скобки из v-for

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.