Как по запросу получить часть контента, а остальную часть подгрузить по мере надобности во vue.js?

Question

[Sector567]

То есть реализовать так называемый lazy loading.
ПРИМЕР:
Вот при помощи axios за отправляю запрос, мне приходит ответ с массивом с 100 url-адресами к картинкам.

Если я просто через цикл переберу этот массив, и запишу в src тега img все пути, то соответственно у меня появятся
100 картинок разом.

Но мне нужно, что бы например появилось только 10 картинок, а при помощи пагинации, когда я переключаю следующую страницу, подгрузилось еще 10, когда переключаюсь на третью страницу- еще 10 и т.д.

Так вот, как правильно это можно реализовать на vue.js?

Comments

[Евгений]

Пока умные дядьки спят, можете поковыряться в направлении filter + router) но это не точно))

Answer 1

[Алексей Ярков]

Разбить массив на чанки и отдавать нужный чанк на нужной странице. Ваш К.О.

Comments

[Sector567]

Спасибо, попробую, а это считается стандартным приемом и все так делают, или это скорее костыли?

[Алексей Ярков]

Sector567, по мне больший костыль это имитировать пагинацию на фронте. Почему не делать запрос к бэкенду и не подгружать только нужное для страницы? Зачем все 100500 грузить? А если я дальше 1 страницы не пойду?

Answer 2

[Арсений Матыцин]

Или формируй запросы по мере необходимости с offset и limit-параметрами. Если API такое не умеет — это плохое API.

Хотя 100 записей (если там не портянка на каждую запись) и бэк не скрипит, отдавая, то это в принципе норм и ты можешь создавать узлы изображений по мере необходимости, держа все данные в памяти. Можно и дальше пойти в сторону intersectionObserver, но кажись это сложновато будет)

Vue да, идеально подходит.

Comments

[Sector567]

Спасибо, буду гуглить эти штуки тогда