Как реализовать «построчный» (постепенный) вывод данных?

Question

[igor_solweb]

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

data: {
dataGet: []
},
methods: {
    getData() {
      axios
          .get('API сервера')
          .then(response => this.dataGet = response.data)
          .catch(error => {
            console.log(error)
          })
},
mounted () {
getData()
}

Comments

[Andrey Vasilev]

а ты получай под фильтром 10 записей, а по кнопке догружай ещё 10 и заливай в массив ещё 10

[Maxim Kirshin]

обычно смысл "загрузить еще" заключается в том, что ты не запрашиваешь с API все данные, а лишь кусок. И при следующем запросе указываешь в параметрах с какой страницы подгружать следующие данные.

Следовательно у API должны быть параметры типа offset и size, и по кнопке загрузить еще ты просто указываешь эти параметры и закидываешь в дату добавленные

[igor_solweb]

Maxim Kirshin, да, так и сделал через offset по ответу ниже, но спасибо за инфу

Answer 1

[Антон Антон]

Добавь в data ограничитель, сделай вычисляемое свойство на первые <ограничитель> записей. если всего записей больше, чем в ограничителе, то показывай кнопку. По нажатию на кнопку увеличивай ограничитель.

Answer 2

[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])

Comments

[Антон Антон]

Только лучше не offset, а limit

[igor_solweb]

Спасибо, работает!