bad4iz Jul 13 2018 at 16:16

Пагинация во Vue.js

2 min

42K

JavaScript*VueJS*

Tutorial

From sandbox

+22

Comments 20

OlehKurpiak Jul 13 2018 at 18:05

math.floor(5/2) = 2, хотя количество страниц должно бить 3

BerkutEagle Jul 13 2018 at 20:01

В примере получается целое количество страниц, поэтому ошибка не проявилась. Потом сломается, на проде!
Вот вам и пример необходимости тестов.

VolCh Jul 14 2018 at 11:46

Тут тесты сами по себе вряд ли бы помогли, даже со 100% покрытия. Собственно тесты — это и есть примеры использования.

RSM Jul 14 2018 at 15:26

Math.ceil должно быть

c01nd01r Jul 13 2018 at 18:30

Это, скорее, виджет, который показывает страницы. Пагинация должна как-то реагировать/переключать элементы.
Можно хотя бы ивенты добавить.

j_wayne Jul 13 2018 at 18:53

С «createFakeData» неинтересно. Вот если бы XHR на бэкенд…

vasyan Jul 13 2018 at 23:25

пример уж сильно хелувордный. Для нормального разговора нужны:
1. XHR и обработка момента загрузки
2. Router — надо page делать параметром в URL
3. Vuex

UFO just landed and posted this here

vasyan Jul 16 2018 at 21:24

Моё видение не сформировалось к сожалению, найти правильный код для реальной жизни довольно сложно. Либо хелуворды, либо обчитаются фаулера, потом пишут несопровождаемое добро.
Приходится перекапывать тонны кода на github. Если в AngularJs, я понимал, как что сделать, то в Vue.js я новичок, так что хорошего способа писать приложения я пока не нашёл.

VolCh Jul 14 2018 at 11:49

Общий вопрос по пагинации: если источник данных её не поддерживает, потенциальное число записей не настолько большое, чтобы клиент начал ощутимо тормозить, то есть ли вообще смысл с нею заморачиваться, пока нет жёсткого требования от бизнеса? Лично мне удобнее скроллить, например, таблицу на 1000 строк, чем страничками её листать.

-1

klubben Jul 14 2018 at 13:11

Полностью согласен, в 99% случаев пагинация ухудшает UX
Никогда не понимал зачем делать, например, список товаров по 10 штук на странице, покажите все сразу

-1

man_without_face Jul 14 2018 at 16:57

В 99?? Вы пошутили?

KriMs Jul 15 2018 at 12:02

:disabled=«pageNumber=0»

тут должно быть два равно "=="

bad4iz Jul 15 2018 at 21:35

спасибо поправил

Yaschik Jul 15 2018 at 21:30

:disabled="pageNumber=0"
Поправте на
:disabled="pageNumber==0"

bad4iz Jul 15 2018 at 21:32

спасибо уже поправил

ivolkoff Jul 15 2018 at 21:30

С vue я не понимаю одной вещи, как правильно хранить данные так что бы они были актуальны, например я гружу по ajax данные пачками, с первой страницы перешёл на вторую, а потом снова на первую. и как правильно действовать?
Брать данные из локального хранилища или снова ajax к серверу. Понимаю что лучше как просит бизнес. Но как вы делаете?

bad4iz Jul 15 2018 at 21:34

Здесь все зависит от того что дорого…
если дорого запросы то локально хранить.
Если хотим сэкономить место у пользователя то запросы.
А еще вы не рассмотрели SPA

Odrin Jul 16 2018 at 11:50

Все всегда зависит от конкретной задачи. Но зачастую вместе с серверной пагинацией идет еще фильтрация/сортировка и пытаться что-то кэшировать на клиенте уже нецелесообразно, imho оптимальнее всего использовать кэш на уровне сетевого взаимодействия — get запросы отлично кешируются.

Fess_blaga Jul 20 2018 at 19:06

Чтобы были актуальны — ajax к серверу или WebSocket.

Если WebSocket — хранить все данные в хранилище (vuex, например), и в нужный момент времени обновлять.

Если ajax — проще реализация, но больше объём передаваемых данных.

Show the best of all time