Почему метод сортировки выдаёт ошибку?

Question

[Дмитрий Кузнецов]

Добрый день. Делаю программу на Electron + VueJS + vuetifyjs. Через API Laravel получаю список пользователей, позже добавляю всё в таблицу с помощью этой таблицы и мне выдаёт ошибку:

Uncaught (in promise) TypeError: items.sort is not a function

Весь код Vue:

<template>
    <v-data-table :headers="headers" :items="persons" :pagination.sync="pagination" :total-items="totalPersons" :loading="loading" class="elevation-1">
        <template slot="persons" slot-scope="props">
            <td>{{ props.item.id }}</td>
            <td>{{ props.item.f }}</td>
            <td>{{ props.item.i }}</td>
            <td>{{ props.item.o }}</td>
        </template>
    </v-data-table>
</template>

<script>
	export default {
		name: 'persons_index',

		data () {
			return {
				headers: [
					{text: 'ID', value: 'id'},
					{text: 'Фамилия', value: 'f'},
					{text: 'Имя', value: 'i'},
					{text: 'Отчество', value: 'o'},
                ],

				totalPersons: 0,
				persons: [],
                loading: true,
                pagination: {},
			}
		},

		watch: {
			pagination: {
				handler () {
					this.getDataFromApi()
						.then(data => {
							this.persons = data.items
							this.totalPersons = data.total
						})
				},
				deep: true
			}
		},

		mounted () {
			this.getDataFromApi()
				.then(data => {
					this.persons = data.items
					this.totalPersons = data.total
				})
		},

		methods: {
			getDataFromApi () {
				this.loading = true
				return new Promise((resolve, reject) => {
					const { sortBy, descending, page, rowsPerPage } = this.pagination

					let items = this.getPersons()
					const total = items.length

					// Если это убрать, то выдаст ошибку
					if(this.pagination.sortBy) {
						items = items.sort((a, b) => {
							const sortA = a[sortBy]
							const sortB = b[sortBy]

							if(descending) {
								if (sortA < sortB) return 1
								if (sortA > sortB) return -1
								return 0
							}else{
								if (sortA < sortB) return -1
								if (sortA > sortB) return 1
								return 0
							}
						})
					}
					// Если это убрать, то выдаст ошибку

					if(rowsPerPage > 0) {
						items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
					}

					setTimeout(() => {
						this.loading = false
						resolve({
							items,
							total
						})
					}, 1000)
				})
			},

			getPersons() {
				return this.axios.get('/api/persons')
			}
		}
	}
</script>

PS: А если убираю сортировку, то выдаёт ошибку:

Uncaught (in promise) TypeError: items.slice is not a function

Да, в JS я слаб, так что прошу помощи. Заранее спасибо.

Answer 1

[Владимир Проскурин]

axios.get возвращает Promise, а не массив. В этом промисе вы уже получаете нужный массив.
Изучите материал https://ru.vuejs.org/v2/cookbook/using-axios-to-co...

Comments

[Дмитрий Кузнецов]

Вы имеете ввиду сделать следующее:
method:

getPersons() {
				this.axios.get('/api/persons')
					.then(response => {
						var persons = response.data.data

                        return persons
					})
					.catch(error => {
						console.log(error)
					})
			}

[Владимир Проскурин]

Дмитрий Кузнецов, нет, так тоже вернется промис.

this.getPersons().then(function(items ) {
          const total = items.length

          // Если это убрать, то выдаст ошибку
          if(this.pagination.sortBy) {
            items = items.sort((a, b) => {
              const sortA = a[sortBy]
              const sortB = b[sortBy]

              if(descending) {
                if (sortA < sortB) return 1
                if (sortA > sortB) return -1
                return 0
              }else{
                if (sortA < sortB) return -1
                if (sortA > sortB) return 1
                return 0
              }
            })
          }
          // Если это убрать, то выдаст ошибку

          if(rowsPerPage > 0) {
            items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
          }

          setTimeout(() => {
            this.loading = false
            resolve({
              items,
              total
            })
          }, 1000);
    });

и

getPersons() {
        return this.axios.get('/api/persons')
          .then(response => {
            var persons = response.data.data

                        return persons
          })
          .catch(error => {
            console.log(error)
          });
      }

[Дмитрий Кузнецов]

Владимир Проскурин, вы написали this.getPersons().then(function(items) в первом методе, но разве так делается, если это по идеи другой метод?

[Владимир Проскурин]

this.getPersons() возвращает промис (который возвращает this.axios.get), у которого есть метод then, который в свою очередь принимает функцию обратного вызова, которая будет вызвана после получения данных, и в нее эти данные будут переданы.
Ссылка по теме промисов https://learn.javascript.ru/promise