@igor_solweb

"Построчный" (постепенный) вывод response.data, как реализовать?

Добрый день снова.

Подскажите как можно реализовать постепенный вывод записей из БД построчно, например есть кнопка "загрузить еще", и ограничитель 10 записей, то есть если при запросе к БД мы получаем 30 записей, то выводятся 10 и появляется кнопка загрузить еще, и только по нажатию на нее подгрузятся следующие 10 и т.д.
С помощью нескольких массивов это делал, но можно ли сделать с помощью одного?

data: {
dataGet: []
},
methods: {
    getData() {
      axios
          .get('API сервера')
          .then(response => this.dataGet = response.data)
          .catch(error => {
            console.log(error)
          })
},
mounted () {
getData()
}
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
fallus
@fallus
Можно попробовать выводить так:
{{ dataGet.slice(0, offset) }}

Ну и в data завести offset: 10

Ну и при клике на кнопку:
<Knopka v-if="offset < dataGet.length" @click="showMore" />


И метод ещё:

showMore(){
this.offset += 10
}


Как-то так.

___________

А если именно подгружать со стороны сервера, то передавать параметр, например get('https://lala.ru/?offset=' + this.offset)

На сервере смещать и выводить на фронте новые 10 записей, заменив прошлые.
________

А если нужно дополнить текущие записи, а не заменять старые то:
.then(response => this.dataGet = [...this.dataGet, ...response.data])
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Добавь в data ограничитель, сделай вычисляемое свойство на первые <ограничитель> записей. если всего записей больше, чем в ограничителе, то показывай кнопку. По нажатию на кнопку увеличивай ограничитель.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы